模块化esm、cjs使用总结

1. 模块化CommonJS ESM

commonjs 可以使用esm进行导入 反之则不行， esm导入必须输入完整的路径包括index.js，后期通过webpack打包可以省略

2. ES Module 特性

通过 script 添加 type = module 的属性，就可以 ES Module 的标准执行其中的 JS 代码

1. ESM 自动采用严格模式，忽略 'use strict'，模块化中的this是undefined
2. 每个 ES Module 都是运行在单独的私有作用域中（解决了使用变量会造成全局污染问题）
3. ESM 是通过 CORS 的方式请求外部 JS 模块的，后端必须设置CORS
4. ESM 的script 标签会延迟执行,相当于给script标签添加了defer属性

3. ESM 导出/导出

1. 逐个导出/统一导出

// 固定写法 不是解构 导入可用as重命名
export const num = 1
export function func() {}
export class Per {}
import { num, func, Per } from './m1.js'
// 默认导出可以是对象 导出的
export default const num = 1  // 或者是一个对象 { num }
import num from './m1.js'// obj

const num = 1
function func() {}
class Per {}
export { num as default, func as funcN, Per } // 默认导出、重命名

import { default as num, funcN as func, Per } from './m1.js'
import num1, { funcN as func, Per } from './m1.js'

2. 统一导出

3. 执行模块代码 from后面不能是变量

import './m3.js' //执行模块

4. 动态导入 使用变量进行导入

const path = './m3.js'
import(path).then(module => {
	console.log('打印***module', module)
})

4. commonjs导出方式

//导出函数
module.exports = sum ===> const sum = require('./algorithm-tmp')
// 导出exports对象
exports.sum = sum ===> const { sum } = require('./algorithm-tmp')
module.exports = { sum } ===> const { sum } = require('./algorithm-tmp')
module.exports = [Soldier, Jedi, JediAdapter] ===>  const [Soldier, Jedi, JediAdapter] = require('../src/structural/adapter/adapter.js');