webpack

webpack 模块化原理

published on
定义 mark.js export const val = 'sd'; export default () => { console.log('jaja'); }; index.js import mark from './mark'; const name = 'jack'; mark(); export default name; 下面的代码是 webpack 打包后生成的代码 (function(modules) { // webpackBootstrap // The module cache var installedModules = {}; // The require function function __webpack_require__(moduleId) { // Check if module is in cache if (installedModules[moduleId]) { return installedModules[moduleId].exports; } // Create a new module (and put it into the cache) var module = (installedModules[moduleId] = { i: moduleId, l: false, exports: {}, }); // Execute the module function modules[moduleId]. Read More...

NPM 发布ESM源码

published on
Background & Research 如果你调试的时候需要看所依赖的npm包的源码,一般包的入口main都指向dist里被babel或rollup编译过的es5代码。 { "name": "my-package", "version": "0.1.0", "main": "dist/index.js" } 会指示你的打包工具在require 或 import的时候找到正确的入口文件在哪,但是现在有种更推荐的方式是同时发布编译后的 es5 代码和 es2015+ 源码,让用户选择。 Why? es2015后,如果使用webpack或rollup构建,可以利用ES Module的很多特性, 加快打包速度, 还可以利用 treeshaking 每个npm包自行编译,很多模块重复引入,增加代码体积(runtime可能不同) 转译的结果是固定的,不能根据平台和市场自定义化 如果编译工具产生隐藏的bug代码,发布到npm上,被大量下载,即使用户编译工具修复了bug,也无法影响包中的源码,只能等待维护者修复。 发布多种版本库在业内已成为一种标准 How? publish 将 package.json 的main直接指向es6代码,会产生2个问题。 在基本上用户webpack编译的时候会选择exclude掉 node_modules下的文件, 这样可以极大的提升编译速度。所以默认都是在npm上发布es5规范的代码。 如果是node环境的代码,说不会经过构建工具的,不支持es6的话直接运行不起了 因此 package.json 中的main指向es5版本代码,要解决这个问题,rollup提出了module字段,现在也被webpack等构建工具所支持。当构建工具遇到我们的模块时,优先使用module字段入口。然后使用main入口。 创建 library webpack config exclude替换为inclue { test: /\.(js|jsx)$/, - exclude: /node_modules/, + include: [ + path.resolve('./src'), + path.resolve('./node_modules/carno') + ], use: { loader: 'babel-loader', }, } Research 这里取redux模块进行研究 Read More...