《ES6 入门教程》Module 加载实现详解浏览器、Node.js 与循环加载机制【免费下载链接】es6tutorial《ECMAScript 6入门》是一本开源的 JavaScript 语言教程全面介绍 ECMAScript 6 新增的语法特性。项目地址: https://gitcode.com/gh_mirrors/es/es6tutorial导读本文是《ECMAScript 6 入门》开源教程仓库 README.md 对全书定位为全面介绍 ECMAScript 6 新引入的语法特性中Module 的加载实现一章的深度展开对应仓库 docs/module-loader.md。上一章 docs/module.md 讲解了import、export等模块语法本文则聚焦这些语法在真实环境中的落地问题浏览器如何通过script typemodule加载模块、Node.js 如何通过.mjs/package.json字段区分 ESM 与 CommonJS以及最让开发者头疼的循环加载到底是怎么工作的。读完本文你将掌握 ESM 在浏览器与 Node.js 两端的完整加载规则、package.json中main/exports字段的实战配置以及用代码示例验证过的循环加载应对方案。在仓库中本文位于全书目录第 23 章见 SUMMARY.md 与 sidebar.md紧随Module 的语法一章两章共同构成 ES6 模块体系的完整闭环。浏览器加载 ES6 模块传统方法同步加载与浏览器堵塞在 ES6 模块出现之前浏览器通过script标签加载 JavaScript 脚本既有页面内嵌脚本也有外部脚本!-- 页面内嵌的脚本 -- script typeapplication/javascript // module code /script !-- 外部脚本 -- script typeapplication/javascript srcpath/to/myModule.js /script由于浏览器脚本的默认语言就是 JavaScript因此typeapplication/javascript可以省略。默认情况下浏览器是同步加载脚本的渲染引擎遇到script标签就会停下来等执行完脚本再继续向下渲染如果是外部脚本还必须加上下载时间。如果脚本体积很大下载和执行时间很长就会造成浏览器堵塞用户会明显感觉到页面卡死、毫无响应。defer 与 async两种异步加载语法为了解决阻塞问题浏览器允许脚本异步加载语法如下script srcpath/to/myModule.js defer/script script srcpath/to/myModule.js async/script打开defer或async属性后渲染引擎遇到这一行命令就会开始下载外部脚本但不会等它下载和执行而是直接执行后面的命令。两者的区别在于执行时机defer要等到整个页面在内存中正常渲染结束DOM 结构完全生成、其他脚本执行完成才执行即渲染完再执行多个defer脚本会按照在页面中出现的顺序依次加载。async一旦下载完渲染引擎就会中断当前渲染去执行该脚本执行完再继续渲染即下载完就执行多个async脚本不保证加载顺序。加载规则typemodule浏览器加载 ES6 模块仍然使用script标签但必须加入typemodule属性script typemodule src./foo.js/script一旦type设为module浏览器就认定这是一个 ES6 模块。关键行为如下异步加载带有typemodule的script都是异步加载不会堵塞浏览器——等到整个页面渲染完再执行模块脚本等同于打开了defer属性script typemodule src./foo.js/script !-- 等同于 -- script typemodule src./foo.js defer/script按出现顺序执行如果网页有多个script typemodule它们会按照在页面中出现的顺序依次执行。async 可以叠加script typemodule也可以打开async属性此时只要模块加载完成渲染引擎就会中断渲染立即执行多个模块不再按出现顺序执行而是谁先加载完谁先执行script typemodule src./foo.js async/script支持内嵌模块ES6 模块允许内嵌在网页中语法行为与加载外部脚本完全一致script typemodule import utils from ./utils.js; // other code /script例如 jQuery 就支持这种模块化加载方式script typemodule import $ from ./jquery/src/jquery.js; $(#message).text(Hi from jQuery!); /script外部模块脚本的五个注意点对于外部的模块脚本如上例的foo.js有以下几点需要特别注意模块作用域代码在模块作用域中运行而不是全局作用域模块内部的顶层变量外部不可见。自动严格模式模块脚本自动采用严格模式不管有没有声明use strict。可以使用 import/export模块之中可以使用import命令加载其他模块.js后缀不可省略需提供绝对 URL 或相对 URL也可以使用export命令输出对外接口。顶层 this 为 undefined模块顶层的this关键字返回undefined而不是指向window因此在模块顶层使用this没有意义。只执行一次同一个模块如果加载多次将只执行一次。下面是一个示例模块import utils from https://example.com/js/utils.js; const x 1; console.log(x window.x); //false console.log(this undefined); // true利用顶层this等于undefined这个语法点可以侦测当前代码是否运行在 ES6 模块之中const isNotModuleScript this ! undefined;这一特性与上一章 docs/module.md 中严格模式一节提到的ES6 模块之中顶层的this指向undefined完全一致是模块代码区别于传统脚本的最直观特征之一。ES6 模块与 CommonJS 模块的三大差异在讨论 Node.js 加载 ES6 模块之前必须先理解 ES6 模块与 CommonJS 模块是完全不同的两套体系它们有三个重大差异CommonJS 模块输出的是值的拷贝ES6 模块输出的是值的引用CommonJS 模块是运行时加载ES6 模块是编译时输出接口CommonJS 模块的require()是同步加载ES6 模块的import命令是异步加载有一个独立的模块依赖解析阶段。第二个差异的根源在于CommonJS 加载的是一个对象即module.exports属性该对象只有在脚本运行完才会生成而 ES6 模块不是对象它的对外接口只是一种静态定义在代码静态解析阶段就会生成。这与上一章讲的ES6 模块的设计思想是尽量静态化使得编译时就能确定模块的依赖关系一脉相承。重点值的拷贝 vs 值的引用先看 CommonJS 的行为。模块文件lib.js输出内部变量counter和改写它的内部方法incCounter// lib.js var counter 3; function incCounter() { counter; } module.exports { counter: counter, incCounter: incCounter, };然后在main.js中加载这个模块// main.js var mod require(./lib); console.log(mod.counter); // 3 mod.incCounter(); console.log(mod.counter); // 3可以看到lib.js内部的变化影响不到输出的mod.counter——因为mod.counter是一个原始类型的值会被缓存。除非把输出值改写成函数取值器才能读取到内部变动后的值// lib.js var counter 3; function incCounter() { counter; } module.exports { get counter() { return counter }, incCounter: incCounter, };此时再执行main.js就可以正确读取内部变量counter的变动$ node main.js 3 4ES6 模块的运行机制完全不同。JS 引擎对脚本做静态分析时遇到import命令就会生成一个只读引用等到脚本真正执行时再根据这个只读引用到被加载的模块内部去取值。换言之ES6 的import有点像 Unix 系统的符号连接原始值变了import加载的值也会跟着变。因此 ES6 模块是动态引用不会缓存值模块里的变量绑定其所在的模块。用同样的例子对比// lib.js export let counter 3; export function incCounter() { counter; } // main.js import { counter, incCounter } from ./lib; console.log(counter); // 3 incCounter(); console.log(counter); // 4ES6 模块输入的变量counter是活的完全反映其所在模块lib.js内部的变化。再看上一章export一节中出现过的例子// m1.js export var foo bar; setTimeout(() foo baz, 500); // m2.js import {foo} from ./m1.js; console.log(foo); setTimeout(() console.log(foo), 500);m1.js的变量foo刚加载时等于bar500 毫秒后变为baz。执行m2.js验证它能否读到这个变化$ babel-node m2.js bar baz这证明 ES6 模块不会缓存运行结果而是动态地去被加载的模块取值变量总是绑定其所在的模块。输入接口是只读的由于 ES6 输入的模块变量只是符号连接所以这个变量是只读的对它重新赋值会报错// lib.js export let obj {}; // main.js import { obj } from ./lib; obj.prop 123; // OK obj {}; // TypeErrormain.js可以对obj添加属性但重新赋值会报错——变量obj指向的地址是只读的这好比main.js创造了一个名为obj的const变量。这一规则也呼应了上一章 docs/module.md 中import命令输入的变量都是只读的的语法约束。export 输出的是同一个实例export通过接口输出的是同一个值不同脚本加载这个接口得到的都是同样的实例// mod.js function C() { this.sum 0; this.add function () { this.sum 1; }; this.show function () { console.log(this.sum); }; } export let c new C();mod.js输出的是一个C的实例多个脚本加载它得到同一个实例// x.js import {c} from ./mod; c.add(); // y.js import {c} from ./mod; c.show(); // main.js import ./x; import ./y;执行main.js输出的是1$ babel-node main.js 1这证明了x.js和y.js加载的都是C的同一个实例。Node.js 的模块加载方法概述.mjs、type 字段与 .cjsJavaScript 现在有两种模块ES6 模块简称ESM和 CommonJS 模块简称CJS。CommonJS 模块是 Node.js 专用的与 ES6 模块不兼容。语法上两者最明显的差异是CommonJS 使用require()和module.exportsES6 模块使用import和export。它们采用不同的加载方案。从 Node.js v13.2 版本开始Node.js 已经默认打开了 ES6 模块支持。Node.js 要求 ES6 模块采用.mjs后缀名——只要脚本文件里使用import或export命令就必须采用.mjs后缀。Node.js 遇到.mjs文件就认定它是 ES6 模块默认启用严格模式不必在模块文件顶部指定use strict。如果不希望把后缀名改成.mjs可以在项目的package.json中指定type字段为module{ type: module }设置以后该项目的 JS 脚本就被解释成 ES6 模块# 解释成 ES6 模块 $ node my-app.js如果这时还要使用 CommonJS 模块则需要把 CommonJS 脚本的后缀名都改成.cjs。如果没有type字段或者type字段为commonjs则.js脚本会被解释成 CommonJS 模块。总结为一句话.mjs文件总是以 ES6 模块加载.cjs文件总是以 CommonJS 模块加载.js文件的加载方式取决于package.json里type字段的设置。注意ES6 模块与 CommonJS 模块尽量不要混用require命令不能加载.mjs文件会报错只有import命令才可以加载.mjs文件反过来.mjs文件里也不能使用require命令必须使用import。package.json 的 main 字段package.json有两个字段可以指定模块的入口文件main和exports。比较简单的模块可以只使用main字段指定模块加载的入口文件// ./node_modules/es-module-package/package.json { type: module, main: ./src/index.js }上面配置指定项目的入口脚本为./src/index.js其格式为 ES6 模块。如果没有type字段index.js就会被解释为 CommonJS 模块。然后import命令就可以加载这个模块// ./my-app.mjs import { something } from es-module-package; // 实际加载的是 ./node_modules/es-module-package/src/index.js运行该脚本后Node.js 会到./node_modules目录下寻找es-module-package模块并根据其package.json的main字段执行入口文件。此时如果改用 CommonJS 的require()去加载es-module-package会报错因为 CommonJS 模块不能处理export命令。package.json 的 exports 字段exports字段的优先级高于main字段它有多种用法。1子目录别名exports字段可以指定脚本或子目录的别名// ./node_modules/es-module-package/package.json { exports: { ./submodule: ./src/submodule.js } }上面代码把src/submodule.js别名为submodule然后就可以从别名加载这个文件import submodule from es-module-package/submodule; // 加载 ./node_modules/es-module-package/src/submodule.js子目录也可以整体指定别名// ./node_modules/es-module-package/package.json { exports: { ./features/: ./src/features/ } } import feature from es-module-package/features/x.js; // 加载 ./node_modules/es-module-package/src/features/x.js如果没有指定别名就不能用模块脚本名这种形式加载脚本// 报错 import submodule from es-module-package/private-module.js; // 不报错 import submodule from ./node_modules/es-module-package/private-module.js;2main 的别名exports字段的别名如果是.就代表模块的主入口优先级高于main字段并且可以直接简写成exports字段的值{ exports: { .: ./main.js } } // 等同于 { exports: ./main.js }由于exports字段只有支持 ES6 的 Node.js 才认识所以可以搭配main字段来兼容旧版本的 Node.js{ main: ./main-legacy.cjs, exports: { .: ./main-modern.cjs } }上面配置中老版本 Node.js不支持 ES6 模块的入口文件是main-legacy.cjs新版本 Node.js 的入口文件是main-modern.cjs。3条件加载利用.这个别名可以为 ES6 模块和 CommonJS 指定不同的入口{ type: module, exports: { .: { require: ./main.cjs, default: ./main.js } } }别名.的require条件指定require()命令的入口文件即 CommonJS 的入口default条件指定其他情况的入口即 ES6 的入口。上面的写法可以简写如下{ exports: { require: ./main.cjs, default: ./main.js } }注意如果同时还有其他别名就不能采用简写否则会报错{ // 报错 exports: { ./feature: ./lib/feature.js, require: ./main.cjs, default: ./main.js } }CommonJS 模块加载 ES6 模块CommonJS 的require()命令不能加载 ES6 模块会报错只能使用import()这个方法(async () { await import(./my-app.mjs); })();上面代码可以在 CommonJS 模块中运行。require()不支持 ES6 模块的一个原因是它是同步加载而 ES6 模块内部可以使用顶层await命令导致无法被同步加载。ES6 模块加载 CommonJS 模块ES6 模块的import命令可以加载 CommonJS 模块但只能整体加载不能只加载单一的输出项// 正确 import packageMain from commonjs-package; // 报错 import { method } from commonjs-package;这是因为 ES6 模块需要支持静态代码分析而 CommonJS 模块的输出接口是module.exports是一个对象无法被静态分析所以只能整体加载。要加载单一的输出项可以写成下面这样import packageMain from commonjs-package; const { method } packageMain;还有一种变通的加载方法就是使用 Node.js 内置的module.createRequire()方法// cjs.cjs module.exports cjs; // esm.mjs import { createRequire } from module; const require createRequire(import.meta.url); const cjs require(./cjs.cjs); cjs cjs; // trueES6 模块通过module.createRequire()方法可以加载 CommonJS 模块。但这种写法等于将 ES6 和 CommonJS 混在一起了因此不建议使用。同时支持两种格式的模块一个模块同时支持 CommonJS 和 ES6 两种格式也很容易。如果原始模块是 ES6 格式需要给出一个整体输出接口比如export default obj使 CommonJS 可以用import()加载。如果原始模块是 CommonJS 格式可以加一个包装层import cjsModule from ../index.js; export const foo cjsModule.foo;上面代码先整体输入 CommonJS 模块再根据需要输出具名接口。可以将这个文件的后缀名改为.mjs或者把它放在一个子目录再在这个子目录里放一个单独的package.json指明{ type: module }。另一种做法是在package.json的exports字段指明两种格式各自的加载入口exports: { require: ./index.js, import: ./esm/wrapper.js }上面代码指定require()和import加载该模块时会自动切换到不一样的入口文件。Node.js 的内置模块Node.js 的内置模块可以整体加载也可以加载指定的输出项// 整体加载 import EventEmitter from events; const e new EventEmitter(); // 加载指定的输出项 import { readFile } from fs; readFile(./foo.txt, (err, source) { if (err) { console.error(err); } else { console.log(source); } });加载路径ES6 模块的加载路径必须给出脚本的完整路径不能省略脚本的后缀名。import命令和package.json的main字段如果省略脚本后缀名会报错// ES6 模块中将报错 import { something } from ./index;为了与浏览器的import加载规则相同Node.js 的.mjs文件支持 URL 路径import ./foo.mjs?query1; // 加载 ./foo 传入参数 ?query1脚本路径带有参数?query1时Node 会按 URL 规则解读。同一个脚本只要参数不同就会被加载多次并保存成不同的缓存。因此只要文件名中含有:、%、#、?等特殊字符最好对这些字符进行转义。目前Node.js 的import命令只支持加载本地模块file:协议和data:协议不支持加载远程模块。另外脚本路径只支持相对路径不支持绝对路径即以/或//开头的路径。内部变量ES6 模块应该是通用的同一个模块不用修改就可以在浏览器环境和服务器环境使用。为了达到这个目标Node.js 规定 ES6 模块中不能使用 CommonJS 模块特有的一些内部变量。首先就是this关键字ES6 模块中顶层的this指向undefinedCommonJS 模块的顶层this指向当前模块这是两者的一个重大差异。其次以下这些顶层变量在 ES6 模块中都不存在argumentsrequiremoduleexports__filename__dirname循环加载什么是循环加载循环加载circular dependency指的是a脚本的执行依赖b脚本而b脚本的执行又依赖a脚本// a.js var b require(b); // b.js var a require(a);通常循环加载表示存在强耦合如果处理不好还可能导致递归加载使程序无法执行因此应该尽量避免。但实际中很难完全避免——尤其是依赖关系复杂的大项目很容易出现a依赖b、b依赖c、c又依赖a的情况。这意味着模块加载机制必须考虑循环加载的场景。对于 JavaScript 语言来说最常见的两种模块格式 CommonJS 和 ES6处理循环加载的方法不一样返回的结果也不一样。CommonJS 模块的加载原理CommonJS 的一个模块就是一个脚本文件。require命令第一次加载该脚本就会执行整个脚本然后在内存中生成一个对象{ id: ..., exports: { ... }, loaded: true, ... }上面就是 Node 内部加载模块后生成的对象id属性是模块名exports属性是模块输出的各个接口loaded属性是布尔值表示该模块的脚本是否执行完毕还有其他属性此处省略。以后需要用到这个模块时就会到exports属性上取值。即使再次执行require命令也不会再次执行该模块而是从缓存中取值。也就是说CommonJS 模块无论加载多少次都只在第一次加载时运行一次以后再加载就返回第一次运行的结果除非手动清除系统缓存。CommonJS 模块的循环加载CommonJS 模块的重要特性是加载时执行脚本代码在require的时候就会全部执行。一旦出现某个模块被循环加载就只输出已经执行的部分还未执行的部分不会输出。看一个经典的例子。脚本文件a.js代码如下exports.done false; var b require(./b.js); console.log(在 a.js 之中b.done %j, b.done); exports.done true; console.log(a.js 执行完毕);a.js先输出一个done变量然后加载另一个脚本b.js。注意此时a.js的代码就停在这里等待b.js执行完毕再继续。再看b.js的代码exports.done false; var a require(./a.js); console.log(在 b.js 之中a.done %j, a.done); exports.done true; console.log(b.js 执行完毕);b.js执行到第二行就去加载a.js这时发生了循环加载。系统会到a.js模块对应对象的exports属性取值但a.js还没执行完只能取回已经执行的部分——目前只有一行exports.done false;因此对于b.js来说它从a.js只输入一个变量done值为false。然后b.js继续往下执行执行完毕后把执行权交还给a.jsa.js再接着执行直到完毕。写一个脚本main.js验证这个过程var a require(./a.js); var b require(./b.js); console.log(在 main.js 之中, a.done%j, b.done%j, a.done, b.done);执行结果如下$ node main.js 在 b.js 之中a.done false b.js 执行完毕 在 a.js 之中b.done true a.js 执行完毕 在 main.js 之中, a.donetrue, b.donetrue上面的输出证明了两件事一是b.js加载a.js时a.js只执行了第一行二是main.js执行到第二行时不会再次执行b.js而是输出缓存的执行结果即第四行exports.done true;。总之CommonJS 输入的是被输出值的拷贝不是引用。另外由于 CommonJS 模块遇到循环加载时返回的是当前已执行部分的值而不是全部代码执行后的值两者可能有差异所以输入变量时必须非常小心var a require(a); // 安全的写法 var foo require(a).foo; // 危险的写法 exports.good function (arg) { return a.foo(good, arg); // 使用的是 a.foo 的最新值 }; exports.bad function (arg) { return foo(bad, arg); // 使用的是一个部分加载时的值 };如果发生循环加载require(a).foo的值很可能在后面被改写改用require(a)会更保险。ES6 模块的循环加载ES6 处理循环加载与 CommonJS 有本质不同。ES6 模块是动态引用如果使用import从一个模块加载变量那些变量不会被缓存而是成为指向被加载模块的引用需要开发者自己保证真正取值时能取到值。看下面这个例子// a.mjs import {bar} from ./b; console.log(a.mjs); console.log(bar); export let foo foo; // b.mjs import {foo} from ./a; console.log(b.mjs); console.log(foo); export let bar bar;a.mjs加载b.mjsb.mjs又加载a.mjs构成循环加载。执行a.mjs$ node --experimental-modules a.mjs b.mjs ReferenceError: foo is not defined执行a.mjs后报错foo未定义为什么逐行分析 ES6 循环加载的处理过程执行a.mjs后引擎发现它加载了b.mjs因此会优先执行b.mjs再执行a.mjs执行b.mjs时已知它从a.mjs输入了foo接口此时不会去执行a.mjs而是认为这个接口已经存在继续往下执行执行到第三行console.log(foo)时才发现这个接口根本没定义因此报错。解决方法是让b.mjs运行时foo已经有定义这可以通过把foo写成函数来解决函数声明具有提升作用// a.mjs import {bar} from ./b; console.log(a.mjs); console.log(bar()); function foo() { return foo } export {foo}; // b.mjs import {foo} from ./a; console.log(b.mjs); console.log(foo()); function bar() { return bar } export {bar};再执行a.mjs就得到预期结果$ node --experimental-modules a.mjs b.mjs foo a.mjs bar这是因为函数声明具有提升作用在执行import {bar} from ./b时函数foo就已经有定义了所以b.mjs加载时不会报错。这也意味着如果把函数foo改写成函数表达式就会再次报错// a.mjs import {bar} from ./b; console.log(a.mjs); console.log(bar()); const foo () foo; export {foo};第四行改成了函数表达式不具有提升作用执行就会报错。再看 ES6 模块加载器 SystemJS 给出的一个经典例子// even.js import { odd } from ./odd export var counter 0; export function even(n) { counter; return n 0 || odd(n - 1); } // odd.js import { even } from ./even; export function odd(n) { return n ! 0 even(n - 1); }even.js里的函数even有一个参数n只要不等于 0 就会减 1传入加载的odd()odd.js也会做类似操作。运行结果如下$ babel-node import * as m from ./even.js; m.even(10); true m.counter 6 m.even(20) true m.counter 17参数n从 10 变为 0 的过程中even()一共执行 6 次所以counter等于 6第二次调用even()时参数从 20 变为 0even()执行 11 次加上前面的 6 次counter等于 17。这个例子如果改写成 CommonJS 就根本无法执行会报错// even.js var odd require(./odd); var counter 0; exports.counter counter; exports.even function (n) { counter; return n 0 || odd(n - 1); } // odd.js var even require(./even).even; module.exports function (n) { return n ! 0 even(n - 1); }even.js加载odd.js而odd.js又去加载even.js形成循环加载。执行引擎会输出even.js已经执行的部分此时不存在任何结果所以在odd.js中变量even等于undefined后面调用even(n - 1)就会报错$ node var m require(./even); m.even(10) TypeError: even is not a function小结ESM 与 CJS 加载机制对照对比维度CommonJSCJSES6 模块ESM输出方式值的拷贝会被缓存值的引用动态绑定类似符号连接加载时机运行时加载require时执行整个脚本编译时输出接口有独立的依赖解析阶段加载方式require()同步加载import异步加载文件后缀.cjs或type非module时的.js.mjs或type: module时的.js顶层this指向当前模块指向undefined循环加载只输出已执行部分的值拷贝动态引用配合函数提升可正确工作入口配置main字段exports字段优先级更高支持条件加载浏览器端通过script typemodule配合defer/async加载 ESMNode.js 端则通过.mjs后缀、package.json的type/main/exports字段来区分与配置两种模块体系。理解值的拷贝 vs 值的引用编译时 vs 运行时这两条主线就能把握 ESM 与 CJS 在加载实现上的全部差异进而在实际项目中正确地组织模块、规避循环加载陷阱。相关语法层面的完整讲解可继续查阅本书上一章 docs/module.md全书章节索引见 SUMMARY.md。【免费下载链接】es6tutorial《ECMAScript 6入门》是一本开源的 JavaScript 语言教程全面介绍 ECMAScript 6 新增的语法特性。项目地址: https://gitcode.com/gh_mirrors/es/es6tutorial创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 《ES6 入门教程》Module 加载实现详解：浏览器、Node.js 与循环加载机制
《ES6 入门教程》Module 加载实现详解浏览器、Node.js 与循环加载机制【免费下载链接】es6tutorial《ECMAScript 6入门》是一本开源的 JavaScript 语言教程全面介绍 ECMAScript 6 新增的语法特性。项目地址: https://gitcode.com/gh_mirrors/es/es6tutorial导读本文是《ECMAScript 6 入门》开源教程仓库 README.md 对全书定位为全面介绍 ECMAScript 6 新引入的语法特性中Module 的加载实现一章的深度展开对应仓库 docs/module-loader.md。上一章 docs/module.md 讲解了import、export等模块语法本文则聚焦这些语法在真实环境中的落地问题浏览器如何通过script typemodule加载模块、Node.js 如何通过.mjs/package.json字段区分 ESM 与 CommonJS以及最让开发者头疼的循环加载到底是怎么工作的。读完本文你将掌握 ESM 在浏览器与 Node.js 两端的完整加载规则、package.json中main/exports字段的实战配置以及用代码示例验证过的循环加载应对方案。在仓库中本文位于全书目录第 23 章见 SUMMARY.md 与 sidebar.md紧随Module 的语法一章两章共同构成 ES6 模块体系的完整闭环。浏览器加载 ES6 模块传统方法同步加载与浏览器堵塞在 ES6 模块出现之前浏览器通过script标签加载 JavaScript 脚本既有页面内嵌脚本也有外部脚本!-- 页面内嵌的脚本 -- script typeapplication/javascript // module code /script !-- 外部脚本 -- script typeapplication/javascript srcpath/to/myModule.js /script由于浏览器脚本的默认语言就是 JavaScript因此typeapplication/javascript可以省略。默认情况下浏览器是同步加载脚本的渲染引擎遇到script标签就会停下来等执行完脚本再继续向下渲染如果是外部脚本还必须加上下载时间。如果脚本体积很大下载和执行时间很长就会造成浏览器堵塞用户会明显感觉到页面卡死、毫无响应。defer 与 async两种异步加载语法为了解决阻塞问题浏览器允许脚本异步加载语法如下script srcpath/to/myModule.js defer/script script srcpath/to/myModule.js async/script打开defer或async属性后渲染引擎遇到这一行命令就会开始下载外部脚本但不会等它下载和执行而是直接执行后面的命令。两者的区别在于执行时机defer要等到整个页面在内存中正常渲染结束DOM 结构完全生成、其他脚本执行完成才执行即渲染完再执行多个defer脚本会按照在页面中出现的顺序依次加载。async一旦下载完渲染引擎就会中断当前渲染去执行该脚本执行完再继续渲染即下载完就执行多个async脚本不保证加载顺序。加载规则typemodule浏览器加载 ES6 模块仍然使用script标签但必须加入typemodule属性script typemodule src./foo.js/script一旦type设为module浏览器就认定这是一个 ES6 模块。关键行为如下异步加载带有typemodule的script都是异步加载不会堵塞浏览器——等到整个页面渲染完再执行模块脚本等同于打开了defer属性script typemodule src./foo.js/script !-- 等同于 -- script typemodule src./foo.js defer/script按出现顺序执行如果网页有多个script typemodule它们会按照在页面中出现的顺序依次执行。async 可以叠加script typemodule也可以打开async属性此时只要模块加载完成渲染引擎就会中断渲染立即执行多个模块不再按出现顺序执行而是谁先加载完谁先执行script typemodule src./foo.js async/script支持内嵌模块ES6 模块允许内嵌在网页中语法行为与加载外部脚本完全一致script typemodule import utils from ./utils.js; // other code /script例如 jQuery 就支持这种模块化加载方式script typemodule import $ from ./jquery/src/jquery.js; $(#message).text(Hi from jQuery!); /script外部模块脚本的五个注意点对于外部的模块脚本如上例的foo.js有以下几点需要特别注意模块作用域代码在模块作用域中运行而不是全局作用域模块内部的顶层变量外部不可见。自动严格模式模块脚本自动采用严格模式不管有没有声明use strict。可以使用 import/export模块之中可以使用import命令加载其他模块.js后缀不可省略需提供绝对 URL 或相对 URL也可以使用export命令输出对外接口。顶层 this 为 undefined模块顶层的this关键字返回undefined而不是指向window因此在模块顶层使用this没有意义。只执行一次同一个模块如果加载多次将只执行一次。下面是一个示例模块import utils from https://example.com/js/utils.js; const x 1; console.log(x window.x); //false console.log(this undefined); // true利用顶层this等于undefined这个语法点可以侦测当前代码是否运行在 ES6 模块之中const isNotModuleScript this ! undefined;这一特性与上一章 docs/module.md 中严格模式一节提到的ES6 模块之中顶层的this指向undefined完全一致是模块代码区别于传统脚本的最直观特征之一。ES6 模块与 CommonJS 模块的三大差异在讨论 Node.js 加载 ES6 模块之前必须先理解 ES6 模块与 CommonJS 模块是完全不同的两套体系它们有三个重大差异CommonJS 模块输出的是值的拷贝ES6 模块输出的是值的引用CommonJS 模块是运行时加载ES6 模块是编译时输出接口CommonJS 模块的require()是同步加载ES6 模块的import命令是异步加载有一个独立的模块依赖解析阶段。第二个差异的根源在于CommonJS 加载的是一个对象即module.exports属性该对象只有在脚本运行完才会生成而 ES6 模块不是对象它的对外接口只是一种静态定义在代码静态解析阶段就会生成。这与上一章讲的ES6 模块的设计思想是尽量静态化使得编译时就能确定模块的依赖关系一脉相承。重点值的拷贝 vs 值的引用先看 CommonJS 的行为。模块文件lib.js输出内部变量counter和改写它的内部方法incCounter// lib.js var counter 3; function incCounter() { counter; } module.exports { counter: counter, incCounter: incCounter, };然后在main.js中加载这个模块// main.js var mod require(./lib); console.log(mod.counter); // 3 mod.incCounter(); console.log(mod.counter); // 3可以看到lib.js内部的变化影响不到输出的mod.counter——因为mod.counter是一个原始类型的值会被缓存。除非把输出值改写成函数取值器才能读取到内部变动后的值// lib.js var counter 3; function incCounter() { counter; } module.exports { get counter() { return counter }, incCounter: incCounter, };此时再执行main.js就可以正确读取内部变量counter的变动$ node main.js 3 4ES6 模块的运行机制完全不同。JS 引擎对脚本做静态分析时遇到import命令就会生成一个只读引用等到脚本真正执行时再根据这个只读引用到被加载的模块内部去取值。换言之ES6 的import有点像 Unix 系统的符号连接原始值变了import加载的值也会跟着变。因此 ES6 模块是动态引用不会缓存值模块里的变量绑定其所在的模块。用同样的例子对比// lib.js export let counter 3; export function incCounter() { counter; } // main.js import { counter, incCounter } from ./lib; console.log(counter); // 3 incCounter(); console.log(counter); // 4ES6 模块输入的变量counter是活的完全反映其所在模块lib.js内部的变化。再看上一章export一节中出现过的例子// m1.js export var foo bar; setTimeout(() foo baz, 500); // m2.js import {foo} from ./m1.js; console.log(foo); setTimeout(() console.log(foo), 500);m1.js的变量foo刚加载时等于bar500 毫秒后变为baz。执行m2.js验证它能否读到这个变化$ babel-node m2.js bar baz这证明 ES6 模块不会缓存运行结果而是动态地去被加载的模块取值变量总是绑定其所在的模块。输入接口是只读的由于 ES6 输入的模块变量只是符号连接所以这个变量是只读的对它重新赋值会报错// lib.js export let obj {}; // main.js import { obj } from ./lib; obj.prop 123; // OK obj {}; // TypeErrormain.js可以对obj添加属性但重新赋值会报错——变量obj指向的地址是只读的这好比main.js创造了一个名为obj的const变量。这一规则也呼应了上一章 docs/module.md 中import命令输入的变量都是只读的的语法约束。export 输出的是同一个实例export通过接口输出的是同一个值不同脚本加载这个接口得到的都是同样的实例// mod.js function C() { this.sum 0; this.add function () { this.sum 1; }; this.show function () { console.log(this.sum); }; } export let c new C();mod.js输出的是一个C的实例多个脚本加载它得到同一个实例// x.js import {c} from ./mod; c.add(); // y.js import {c} from ./mod; c.show(); // main.js import ./x; import ./y;执行main.js输出的是1$ babel-node main.js 1这证明了x.js和y.js加载的都是C的同一个实例。Node.js 的模块加载方法概述.mjs、type 字段与 .cjsJavaScript 现在有两种模块ES6 模块简称ESM和 CommonJS 模块简称CJS。CommonJS 模块是 Node.js 专用的与 ES6 模块不兼容。语法上两者最明显的差异是CommonJS 使用require()和module.exportsES6 模块使用import和export。它们采用不同的加载方案。从 Node.js v13.2 版本开始Node.js 已经默认打开了 ES6 模块支持。Node.js 要求 ES6 模块采用.mjs后缀名——只要脚本文件里使用import或export命令就必须采用.mjs后缀。Node.js 遇到.mjs文件就认定它是 ES6 模块默认启用严格模式不必在模块文件顶部指定use strict。如果不希望把后缀名改成.mjs可以在项目的package.json中指定type字段为module{ type: module }设置以后该项目的 JS 脚本就被解释成 ES6 模块# 解释成 ES6 模块 $ node my-app.js如果这时还要使用 CommonJS 模块则需要把 CommonJS 脚本的后缀名都改成.cjs。如果没有type字段或者type字段为commonjs则.js脚本会被解释成 CommonJS 模块。总结为一句话.mjs文件总是以 ES6 模块加载.cjs文件总是以 CommonJS 模块加载.js文件的加载方式取决于package.json里type字段的设置。注意ES6 模块与 CommonJS 模块尽量不要混用require命令不能加载.mjs文件会报错只有import命令才可以加载.mjs文件反过来.mjs文件里也不能使用require命令必须使用import。package.json 的 main 字段package.json有两个字段可以指定模块的入口文件main和exports。比较简单的模块可以只使用main字段指定模块加载的入口文件// ./node_modules/es-module-package/package.json { type: module, main: ./src/index.js }上面配置指定项目的入口脚本为./src/index.js其格式为 ES6 模块。如果没有type字段index.js就会被解释为 CommonJS 模块。然后import命令就可以加载这个模块// ./my-app.mjs import { something } from es-module-package; // 实际加载的是 ./node_modules/es-module-package/src/index.js运行该脚本后Node.js 会到./node_modules目录下寻找es-module-package模块并根据其package.json的main字段执行入口文件。此时如果改用 CommonJS 的require()去加载es-module-package会报错因为 CommonJS 模块不能处理export命令。package.json 的 exports 字段exports字段的优先级高于main字段它有多种用法。1子目录别名exports字段可以指定脚本或子目录的别名// ./node_modules/es-module-package/package.json { exports: { ./submodule: ./src/submodule.js } }上面代码把src/submodule.js别名为submodule然后就可以从别名加载这个文件import submodule from es-module-package/submodule; // 加载 ./node_modules/es-module-package/src/submodule.js子目录也可以整体指定别名// ./node_modules/es-module-package/package.json { exports: { ./features/: ./src/features/ } } import feature from es-module-package/features/x.js; // 加载 ./node_modules/es-module-package/src/features/x.js如果没有指定别名就不能用模块脚本名这种形式加载脚本// 报错 import submodule from es-module-package/private-module.js; // 不报错 import submodule from ./node_modules/es-module-package/private-module.js;2main 的别名exports字段的别名如果是.就代表模块的主入口优先级高于main字段并且可以直接简写成exports字段的值{ exports: { .: ./main.js } } // 等同于 { exports: ./main.js }由于exports字段只有支持 ES6 的 Node.js 才认识所以可以搭配main字段来兼容旧版本的 Node.js{ main: ./main-legacy.cjs, exports: { .: ./main-modern.cjs } }上面配置中老版本 Node.js不支持 ES6 模块的入口文件是main-legacy.cjs新版本 Node.js 的入口文件是main-modern.cjs。3条件加载利用.这个别名可以为 ES6 模块和 CommonJS 指定不同的入口{ type: module, exports: { .: { require: ./main.cjs, default: ./main.js } } }别名.的require条件指定require()命令的入口文件即 CommonJS 的入口default条件指定其他情况的入口即 ES6 的入口。上面的写法可以简写如下{ exports: { require: ./main.cjs, default: ./main.js } }注意如果同时还有其他别名就不能采用简写否则会报错{ // 报错 exports: { ./feature: ./lib/feature.js, require: ./main.cjs, default: ./main.js } }CommonJS 模块加载 ES6 模块CommonJS 的require()命令不能加载 ES6 模块会报错只能使用import()这个方法(async () { await import(./my-app.mjs); })();上面代码可以在 CommonJS 模块中运行。require()不支持 ES6 模块的一个原因是它是同步加载而 ES6 模块内部可以使用顶层await命令导致无法被同步加载。ES6 模块加载 CommonJS 模块ES6 模块的import命令可以加载 CommonJS 模块但只能整体加载不能只加载单一的输出项// 正确 import packageMain from commonjs-package; // 报错 import { method } from commonjs-package;这是因为 ES6 模块需要支持静态代码分析而 CommonJS 模块的输出接口是module.exports是一个对象无法被静态分析所以只能整体加载。要加载单一的输出项可以写成下面这样import packageMain from commonjs-package; const { method } packageMain;还有一种变通的加载方法就是使用 Node.js 内置的module.createRequire()方法// cjs.cjs module.exports cjs; // esm.mjs import { createRequire } from module; const require createRequire(import.meta.url); const cjs require(./cjs.cjs); cjs cjs; // trueES6 模块通过module.createRequire()方法可以加载 CommonJS 模块。但这种写法等于将 ES6 和 CommonJS 混在一起了因此不建议使用。同时支持两种格式的模块一个模块同时支持 CommonJS 和 ES6 两种格式也很容易。如果原始模块是 ES6 格式需要给出一个整体输出接口比如export default obj使 CommonJS 可以用import()加载。如果原始模块是 CommonJS 格式可以加一个包装层import cjsModule from ../index.js; export const foo cjsModule.foo;上面代码先整体输入 CommonJS 模块再根据需要输出具名接口。可以将这个文件的后缀名改为.mjs或者把它放在一个子目录再在这个子目录里放一个单独的package.json指明{ type: module }。另一种做法是在package.json的exports字段指明两种格式各自的加载入口exports: { require: ./index.js, import: ./esm/wrapper.js }上面代码指定require()和import加载该模块时会自动切换到不一样的入口文件。Node.js 的内置模块Node.js 的内置模块可以整体加载也可以加载指定的输出项// 整体加载 import EventEmitter from events; const e new EventEmitter(); // 加载指定的输出项 import { readFile } from fs; readFile(./foo.txt, (err, source) { if (err) { console.error(err); } else { console.log(source); } });加载路径ES6 模块的加载路径必须给出脚本的完整路径不能省略脚本的后缀名。import命令和package.json的main字段如果省略脚本后缀名会报错// ES6 模块中将报错 import { something } from ./index;为了与浏览器的import加载规则相同Node.js 的.mjs文件支持 URL 路径import ./foo.mjs?query1; // 加载 ./foo 传入参数 ?query1脚本路径带有参数?query1时Node 会按 URL 规则解读。同一个脚本只要参数不同就会被加载多次并保存成不同的缓存。因此只要文件名中含有:、%、#、?等特殊字符最好对这些字符进行转义。目前Node.js 的import命令只支持加载本地模块file:协议和data:协议不支持加载远程模块。另外脚本路径只支持相对路径不支持绝对路径即以/或//开头的路径。内部变量ES6 模块应该是通用的同一个模块不用修改就可以在浏览器环境和服务器环境使用。为了达到这个目标Node.js 规定 ES6 模块中不能使用 CommonJS 模块特有的一些内部变量。首先就是this关键字ES6 模块中顶层的this指向undefinedCommonJS 模块的顶层this指向当前模块这是两者的一个重大差异。其次以下这些顶层变量在 ES6 模块中都不存在argumentsrequiremoduleexports__filename__dirname循环加载什么是循环加载循环加载circular dependency指的是a脚本的执行依赖b脚本而b脚本的执行又依赖a脚本// a.js var b require(b); // b.js var a require(a);通常循环加载表示存在强耦合如果处理不好还可能导致递归加载使程序无法执行因此应该尽量避免。但实际中很难完全避免——尤其是依赖关系复杂的大项目很容易出现a依赖b、b依赖c、c又依赖a的情况。这意味着模块加载机制必须考虑循环加载的场景。对于 JavaScript 语言来说最常见的两种模块格式 CommonJS 和 ES6处理循环加载的方法不一样返回的结果也不一样。CommonJS 模块的加载原理CommonJS 的一个模块就是一个脚本文件。require命令第一次加载该脚本就会执行整个脚本然后在内存中生成一个对象{ id: ..., exports: { ... }, loaded: true, ... }上面就是 Node 内部加载模块后生成的对象id属性是模块名exports属性是模块输出的各个接口loaded属性是布尔值表示该模块的脚本是否执行完毕还有其他属性此处省略。以后需要用到这个模块时就会到exports属性上取值。即使再次执行require命令也不会再次执行该模块而是从缓存中取值。也就是说CommonJS 模块无论加载多少次都只在第一次加载时运行一次以后再加载就返回第一次运行的结果除非手动清除系统缓存。CommonJS 模块的循环加载CommonJS 模块的重要特性是加载时执行脚本代码在require的时候就会全部执行。一旦出现某个模块被循环加载就只输出已经执行的部分还未执行的部分不会输出。看一个经典的例子。脚本文件a.js代码如下exports.done false; var b require(./b.js); console.log(在 a.js 之中b.done %j, b.done); exports.done true; console.log(a.js 执行完毕);a.js先输出一个done变量然后加载另一个脚本b.js。注意此时a.js的代码就停在这里等待b.js执行完毕再继续。再看b.js的代码exports.done false; var a require(./a.js); console.log(在 b.js 之中a.done %j, a.done); exports.done true; console.log(b.js 执行完毕);b.js执行到第二行就去加载a.js这时发生了循环加载。系统会到a.js模块对应对象的exports属性取值但a.js还没执行完只能取回已经执行的部分——目前只有一行exports.done false;因此对于b.js来说它从a.js只输入一个变量done值为false。然后b.js继续往下执行执行完毕后把执行权交还给a.jsa.js再接着执行直到完毕。写一个脚本main.js验证这个过程var a require(./a.js); var b require(./b.js); console.log(在 main.js 之中, a.done%j, b.done%j, a.done, b.done);执行结果如下$ node main.js 在 b.js 之中a.done false b.js 执行完毕 在 a.js 之中b.done true a.js 执行完毕 在 main.js 之中, a.donetrue, b.donetrue上面的输出证明了两件事一是b.js加载a.js时a.js只执行了第一行二是main.js执行到第二行时不会再次执行b.js而是输出缓存的执行结果即第四行exports.done true;。总之CommonJS 输入的是被输出值的拷贝不是引用。另外由于 CommonJS 模块遇到循环加载时返回的是当前已执行部分的值而不是全部代码执行后的值两者可能有差异所以输入变量时必须非常小心var a require(a); // 安全的写法 var foo require(a).foo; // 危险的写法 exports.good function (arg) { return a.foo(good, arg); // 使用的是 a.foo 的最新值 }; exports.bad function (arg) { return foo(bad, arg); // 使用的是一个部分加载时的值 };如果发生循环加载require(a).foo的值很可能在后面被改写改用require(a)会更保险。ES6 模块的循环加载ES6 处理循环加载与 CommonJS 有本质不同。ES6 模块是动态引用如果使用import从一个模块加载变量那些变量不会被缓存而是成为指向被加载模块的引用需要开发者自己保证真正取值时能取到值。看下面这个例子// a.mjs import {bar} from ./b; console.log(a.mjs); console.log(bar); export let foo foo; // b.mjs import {foo} from ./a; console.log(b.mjs); console.log(foo); export let bar bar;a.mjs加载b.mjsb.mjs又加载a.mjs构成循环加载。执行a.mjs$ node --experimental-modules a.mjs b.mjs ReferenceError: foo is not defined执行a.mjs后报错foo未定义为什么逐行分析 ES6 循环加载的处理过程执行a.mjs后引擎发现它加载了b.mjs因此会优先执行b.mjs再执行a.mjs执行b.mjs时已知它从a.mjs输入了foo接口此时不会去执行a.mjs而是认为这个接口已经存在继续往下执行执行到第三行console.log(foo)时才发现这个接口根本没定义因此报错。解决方法是让b.mjs运行时foo已经有定义这可以通过把foo写成函数来解决函数声明具有提升作用// a.mjs import {bar} from ./b; console.log(a.mjs); console.log(bar()); function foo() { return foo } export {foo}; // b.mjs import {foo} from ./a; console.log(b.mjs); console.log(foo()); function bar() { return bar } export {bar};再执行a.mjs就得到预期结果$ node --experimental-modules a.mjs b.mjs foo a.mjs bar这是因为函数声明具有提升作用在执行import {bar} from ./b时函数foo就已经有定义了所以b.mjs加载时不会报错。这也意味着如果把函数foo改写成函数表达式就会再次报错// a.mjs import {bar} from ./b; console.log(a.mjs); console.log(bar()); const foo () foo; export {foo};第四行改成了函数表达式不具有提升作用执行就会报错。再看 ES6 模块加载器 SystemJS 给出的一个经典例子// even.js import { odd } from ./odd export var counter 0; export function even(n) { counter; return n 0 || odd(n - 1); } // odd.js import { even } from ./even; export function odd(n) { return n ! 0 even(n - 1); }even.js里的函数even有一个参数n只要不等于 0 就会减 1传入加载的odd()odd.js也会做类似操作。运行结果如下$ babel-node import * as m from ./even.js; m.even(10); true m.counter 6 m.even(20) true m.counter 17参数n从 10 变为 0 的过程中even()一共执行 6 次所以counter等于 6第二次调用even()时参数从 20 变为 0even()执行 11 次加上前面的 6 次counter等于 17。这个例子如果改写成 CommonJS 就根本无法执行会报错// even.js var odd require(./odd); var counter 0; exports.counter counter; exports.even function (n) { counter; return n 0 || odd(n - 1); } // odd.js var even require(./even).even; module.exports function (n) { return n ! 0 even(n - 1); }even.js加载odd.js而odd.js又去加载even.js形成循环加载。执行引擎会输出even.js已经执行的部分此时不存在任何结果所以在odd.js中变量even等于undefined后面调用even(n - 1)就会报错$ node var m require(./even); m.even(10) TypeError: even is not a function小结ESM 与 CJS 加载机制对照对比维度CommonJSCJSES6 模块ESM输出方式值的拷贝会被缓存值的引用动态绑定类似符号连接加载时机运行时加载require时执行整个脚本编译时输出接口有独立的依赖解析阶段加载方式require()同步加载import异步加载文件后缀.cjs或type非module时的.js.mjs或type: module时的.js顶层this指向当前模块指向undefined循环加载只输出已执行部分的值拷贝动态引用配合函数提升可正确工作入口配置main字段exports字段优先级更高支持条件加载浏览器端通过script typemodule配合defer/async加载 ESMNode.js 端则通过.mjs后缀、package.json的type/main/exports字段来区分与配置两种模块体系。理解值的拷贝 vs 值的引用编译时 vs 运行时这两条主线就能把握 ESM 与 CJS 在加载实现上的全部差异进而在实际项目中正确地组织模块、规避循环加载陷阱。相关语法层面的完整讲解可继续查阅本书上一章 docs/module.md全书章节索引见 SUMMARY.md。【免费下载链接】es6tutorial《ECMAScript 6入门》是一本开源的 JavaScript 语言教程全面介绍 ECMAScript 6 新增的语法特性。项目地址: https://gitcode.com/gh_mirrors/es/es6tutorial创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考