js-module-system
· One min read
CommonJS vs (ESModules)
- https://es6.ruanyifeng.com/#docs/module-loader
- https://hacks.mozilla.org/2015/08/es6-in-depth-modules/
- https://code.zuifengyun.com/2022/01/2448.html
- https://www.typescriptlang.org/docs/handbook/esm-node.html.
- https://dev.to/ayc0/typescript-50-new-mode-bundler-esm-1jic
| module | CommonJS | ESModules |
|---|---|---|
| in/out | require(),module.exports={....} | import/export |
| ref vs copy | cjs module.exports的是值得拷贝 | ESM export的是值引用 |
| html use | <script src=""></> | <script type=module src=""></> |
| 加载 | 运行时加载 | 编译时加载.先加载在执行(es2020 提案引入import()) |
| import name | require("module") | import "module.js" 需要ext名 |
- ESModules import必须要带ext后缀的决策考虑: ESModules设计为可以用在浏览器上,浏览器import加载http server后端时没有后缀,只能盲猜后缀或多次请求.js,.mjs等后缀, 带来极差的用户体验
- .ts编译为.js后 所有import "module" 修改为了 import "module.js"
https://www.typescriptlang.org/tsconfig#target
check point: package.json: "type":"module" #define as ESModules tsconfig: "compilerOptions.module": "commonjs|Node16|ES6", # tsconfig: "compilerOptions.target":"ESNext|es2017|ES6", # filename *.cjs CommonJS, *.js esmodule
workable match:
package.json(no type:module) tsconfig.compilerOptions.module = commonjs tsconfig.compilerOptions.target = es2017
