js模块化

标准

• CommonJS CJS
• Ecmascript Module ESM

两者区别

1. CJS是社区标准，ESM是官方标准
2. CJS是运行时，ESM是编译时
   示例：
   比如 const a = require(‘./a.js’)
   只有运行到这个代码的时候才能确定依赖关系
   比如
   if(xxx) {
   const xxx = require(‘./a.js’)
   } else {
   const xxx = require(‘./b.js’)
   }
   本模块是依赖a模块还是b模块呢，不确定，只有运行到这里，才能确定
   ESM是编译时就确定了依赖关系，所以不能像上面那样写
   if(xxx){
   import xxx from a.js
   }
   会直接报语法错误，导入声明的语句只能在顶层使用
   当然ESM也是支持运行时的，比如动态导入的
   if(xxx){
   import(‘./原型.js’)
   }
   ESM是编译时就确定好依赖，不用运行代码，非常有利于以后得优化，一般打包工具都是强烈建议使用ESM模块标准，因为CommonsJS 不好做优化，它要运行，一般打包工具是不会运行代码的

实现

浏览器（支持ESM）<script src="./1.js" type="module"></script>
node (CJS ESM)
构建工具 (CJS ESM) gulp webpack rollup esbuilder