关于javascript:每天读一点webpack001

npm 包咱们能够通过 package.json 中的包信息文件疾速的定位到这个包的入口文件，通过 webpack 的包信息 main 字段能够失去整个 webpack 我的项目的入口地位为 lib/index.js

入口文件中通过动静导入的形式将我的项目的各个模块进行整合，如各种外部插件，外部依赖，外部配置信息等。

在入口文件中通过一个缓存办法 lazyFunction 将 webpack 这个模块进行了缓存操作，其中源码如下
```
// 通过 lazyFunction 对指定包进行缓存操作
const fn = lazyFunction(() => require("./webpack"));
```
如何实现包的缓存？lazyFunction 其实是应用了闭包的形式对包进行了缓存。先看要害源码，memoize 办法通过闭包的形式将入参中函数 fn 的执行后果缓存起来，这样在下次想要获取 fn 函数的返回后果时就无需在执行 fn 办法了。
```
const memoize = fn => {
let cache = false
let result = undefined
// 返回一个函数 结构一个 闭包，用于缓存 fn 函数的返回值
return () => {if(cache) {return result}else {result = fn()
    cache = true
    return result
  }
}
}
```
而 lazyFunction 只是对以上 memoize 办法的简略封装，使得其返回的办法反对参数传递，实际上相当于一次柯里化解决。然而 memoize 中并没有承受其传入的参数，因而此次封装并无成果。其实能够间接将 memoize 办法进行一步革新，让其作为返回值的函数承受入参，并传递给 fn 函数即可达到预期成果,
```
const lazyFunction = factory => {const fac = memoize(factory);
  const f = (...args) => {return fac()(...args);
  }
  return f;
};
```

入口文件中并没有简略对依赖进行组合，而是通过 mergeExports 办法对各个模块进行了组装。该办法次要通过Object.defineProperty 来达到对象组装的目标，这样做的目标是，能够更好的对对象的属性进行管制，如属性的 读、写、删除、枚举。相干源码如下

getOwnPropertyDescriptors 用于获取对象上 所有属性 的描述符

该办法中应用了递归的形式将对象类型的属性平铺开来，这样使得 源码模块特间关系能够放弃的同时，升高了模块性能利用的复杂性。

const mergeExports = (obj, exports) => {const descriptors = Object.getOwnPropertyDescriptors(exports);
for (const name of Object.keys(descriptors)) {const descriptor = descriptors[name];
    if (descriptor.get) {
        const fn = descriptor.get;
        Object.defineProperty(obj, name, {
            configurable: false,
            enumerable: true,
            get: memoize(fn)
        });
    } else if (typeof descriptor.value === "object") {
        Object.defineProperty(obj, name, {
            configurable: false,
            enumerable: true,
            writable: false,
    // 通过递归的形式将 对象类型的 属性 平铺开来
            value: mergeExports({}, descriptor.value)
        });
    } else {
        throw new Error("Exposed values must be either a getter or an nested object");
    }
}
return /** @type {A & B} */ (Object.freeze(obj));
};

关于javascript:每天读一点webpack001

每天读一点 webpack

day-01-webpack 入口

入口文件

包的缓存

包的合并