js模块发展历程-javaScript模块七日谈前端模块化开发那点历史 #588现代ES模块也需要各种转码工具才可以在浏览器里正常运行，下面是转码现代ES模块需要了解到的知识点
commonjs & ES module & babel转码 & webpack转码
CommonJS简述CommonJS 模块输出的是一个值的 拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值了如果输出的是对象，改变其属性的话，外部引用的地方是会发生变化的如果直接改变输出的引用，那外界引用的地方是不会变化的（取缓存里面的结果）CommonJS 加载的是一个对象(即 module.exports 属性)，该对象只有在脚本运行完才会生成commonjs 一个模块就是一个文件，require 命令第一次执行加载该脚本就会执行整个脚本，然后在内存中生成一个对象{ id: '...', // 模块名 exports: {}, // 真实的模块 loaded: true // 是否加载完毕}以后再次 require 该模块时，就会去缓存里取该对象的 exports 的属性无论 require 多少次，模块都只会运行一次，后续加载都是从缓存里面取module.exports 与 exports 的关系commonjs 规范仅仅定义了 exportsmodule.exports 是 nodejs 对 commonjs 规范的实现我们把这种实现称为 commonjs2https://github.com/webpack/webpack/issues/1114#issuecomment-105509929exports 只是在初始化对 module.exports 的引用初始化指向同一片内存空间模块导出的是 module.exports 如果对 module.exports 重新赋值，exports 上，挂的方法/属性将会失效require 引入的是 module.exports 导出的东西为避免混乱/错误，一般导出模块只建议用 module.exports 一般第三方包都用这种方式导出 modules.exports = exports = {}循环引用问题 （某个模块出现循环加载，就只输出已经执行的部分，还未执行的部分不会输出）// 代码如下// a.jsexports.A = '我是a模块';var b = require('./b.js');console.log('在 a.js 之中， 输出的 b模块==> ', b.B);exports.A = '我是后期修改过的a模块';console.log('a.js 执行完毕');// b.jsexports.B = '我是b模块';var a = require('./a.js');console.log('在 b.js 之中，输出a模块 ==>', a.A);exports.B = '我是修改后的b模块';console.log('b.js 执行完毕');// main.jsvar a = require('./a.js');var b = require('./b.js');console.log('在 main.js 之中,输出的 a模块=%j, b模块=%j', a.A, b.B);// 输出结果如下：➜ webpack-plugin git:(master) ✗ node src/babel/index 在 b.js 之中，输出a模块 ==> 我是a模块b.js 执行完毕在 a.js 之中， 输出的 b模块==> 我是修改后的b模块a.js 执行完毕在 main.js 之中,输出的 a模块="我是后期修改过的a模块", b模块="我是修改后的b模块"// 执行过程如下：执行 a.js 遇到 require b.js，暂停 a.js 执行，去执行 b.jsb.js 执行到第二行，遇到 require a.js ，从缓存中拿出刚刚 a.js 导出的模块，在 b.js 里面使用继续执行 b.js 后面的代码待 b.js 执行完毕后，控制权交还 a.js，继续执行拿到 b.js 导出的模块，在 a.js 继续使用 ... 直到结束 循环引用注意点：由于 commonjs 模块遇到循环加载时，返回的是当前已经执行的部分的值，而不是全部代码之后的值，两者可能会有差异，所以输入变量的时候必须非常小心，使用 var a = require('a') 而不是 var a = require('a').fooES6 Module基本使用export default A // 用户不需要知道导出模块的变量名import a from 'a.js'// 可以导出多个export var a = 1 // 这种方式可以直接导出一个表达式或var a = 1export {a} // 必须用花括号包起来import {a} from 'a.js'// as 关键字重命名模块export { a as A }// 导入导出合并export { default as Comps } from '../xxx'相当于import Comps from './xx'export { Comps }// 执行 loadsh 模块，但并不输出任何值import 'lodash';// 整体加载所有模块，访问时用 circle.xxx 访问import * as circle from './circle';简述: ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入，它的接口只是一种静态定义，在代码静态解析阶段就会生成。// ES6模块import { stat, exists, readFile } from 'fs';上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。由于 ES6 模块是编译时加载，使得静态分析成为可能import命令具有提升效果，会提升到整个模块的头部，首先执行import命令是编译阶段执行的，在代码运行之前。由于 import 是静态执行，所以不能使用表达式和变量（这类只有在运行时才能得到结果的语法结构）静态加载模块的好处：1. 不再需要UMD模块2. 浏览器API可以用模块格式提供，不必再做成全局变量，不再需要全局对象如：Math (可以像Python一样用模块导入)动态 import动态import() 是非常有用的。而静态型的 import 是初始化加载依赖项的最优选择，使用静态 import 更容易从代码静态分析工具和 tree shaking 中受益import(模块路径) 返回 promise，从 then 的结果里拿到加载的模块webpack 2.x 之后，有一个魔力注释的功能，会把加载的模块重命名为你注释里的文字ES6模块的浏览器加载传统方法加载js脚本script type="application/javascript"异步加载： async defer脚本异步加载，不会阻塞dom结构的解析async：加载完立即执行，渲染引擎中断，待之脚本执行完继续渲染defer：加载完会等待页面渲染完毕及页面其他脚本执行完毕才会执行多个 async 执行没有顺序保证，多个 defer 有顺序保证 es6 模块加载script type="module"浏览器对 type="module" 的处理和 defer 标志一致es6 模块的循环加载ES6 处理“循环加载”与 CommonJS 有本质的不同。ES6 模块是动态引用，如果使用import从一个模块加载变量（即import foo from 'foo'），那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。es6 模块会在使用使用时才去加载对应的模块如果是循环应用，可以将对应的输出改写成函数形式，利用函数的变量提升功能CommonJS 与 ES Module 的对比// 此处是对比CommonJS 模块时运行时加载 -- 值得拷贝ES6模块时 编译时 输出接口 -- 值得引用commonjs 模块只会加载一次，以后在 碰到 require 同样的东西就从缓存里面加载如果把原模块导出的东西改变，引入模块不会跟着改变，还是从缓存里面取原来的值ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变。ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。commonjs： module.exports = {} exports 运行阶段才加载模块，可以使用逻辑语句 模块就是对象加载的就是该对象 加载的是整个模块即将所有的接口都加载进来 输出的是值得拷贝，原模块发生变化不会影响已经加载的 this 指向当前的模块es6 模块 export 可以输出多个 {} export default 解析阶段确定对外的接口，解析阶段输出接口，不可以使用逻辑语句 加载的模块不是对象 可以单独加载其中的几个模块 静态分析，动态引用输出的是值得引用，原模块变化会影响已加载的模块 this 指向 underfinedBabel 转换 ES6 的模块化语法Babel 对 ES6 模块转码就是转换成 CommonJS 规范模块输出语法转换Babel 对于模块输出的转换，就是把所有输出都赋值到 exports 对象的属性上，并加上 ESModule: true 的标识表示这个模块是由 ESModule 转换来的 CommonJS 输出对于解构赋值输入import {a} from './a.js'转义为var _c = require('./a.js')然后取 _c.a 对于 defaultimport a from './a'import {default as a} from './a'babel转义时的处理，引入了一个 函数function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {'default': obj}}var _a = _interopRequireDefault(require("./a.js"));console.log(_a["default"]);// 意思就是如果不是 esmodule 就为其手动添加个 default 属性，取值时统一取 default有个疑问：babel 为什么 会把 export export.default 导出的模块转换为 exports.xxx 和 exports.default 呢？而不是 module.exports ???我没有找到解释，如果您知道，麻烦给我留言下webpack 对 es6 模块和commonjs 的处理webpack本身维护了一套模块系统，这套系统兼容所有历史进程下的前端规范写一个简单的webpack配置module.exports = { entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "[name].[contenthash:8].js" }, mode: "development"};执行打包命令 webpack --config webpack.config.js --env=dev 输出 main.[hash].js// 打包后代码简化如下// 首先是一个 webpack 模块运行时代码(function(modules) { // webpackBootstrap // 缓存模块 var installedModules = {}; // 函数 __webpack_require__ 参数 模块 id，用于加载和缓存模块 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].call(module.exports, module, module.exports, __webpack_require__); // Flag the module as loaded module.l = true; // Return the exports of the module return module.exports; } /*** 所有加载的模块都存在于 installedModules 内，其结构为： id: { id, loaded: Boolean // 是否加载过 exports // 模块的导出 } */ // 省略... 定义各种工具函数和变量 // Load entry module and return exports // 加载 entry 模块，并返回其导出，我们写的模块才会被真正执行 return __webpack_require__(__webpack_require__.s = "./index.js");})({ "./index.js": (function(module, __webpack_exports__, __webpack_require__) { // ... }, "./src/a.js": (function(module, __webpack_exports__, __webpack_require__) { // ... }, // ...})这个自调用的函数的参数 modules，就是包含所有待加载模块的一个对象{ [id: string]: Function}异步加载: import ==> webpack.requireEnsure ==> webpackJsonphttps://www.njleonzhang.com/2018/12/30/webpack-bundle-1.html其他常见问题1. babel 与 webpack 的关系webpack：将 ES6、CommonJS、amd、cmd 等模块化通过自己内部的机制统一成 webpack 的模块化。babel：转码 es6 语法，配合一些列 babel 工具链可以将新的 es2015+ 代码转换成所有浏览器支持的 es代码，babel 也可以将 es6 模块转换成 commonjs 模块2. es module 与 commonjs 为何可以混用因为 babel 会把 es module 转换成 commonjs 规范的代码babel 转码 es module 时如果遇到 export default 这种导出模块的书写方式后，会将其转换成 exports.default ，这时如果用 require 引入时，需要对其加上 .default 如 require('./a.js').a 这样才能获取 a 模块 export default 导出的 aimport 动态加载的模块也需要 .default 才能获取真实模块导出的值，如 import('./a.js').then(res => res.dafault)3. antd、element-ui 等ui框架的按需加载组件的实现需要 babel-plugin-component
...