commjs esM 导入导出

commjs esM 导入导出

前言：

我们不止要知道  同模块导入、导出。结果是什么样的。
我们还要知道   不同模块 导入、导出。 结果是什么样的。

场景：

目标场景 浏览器。 浏览器 不支持 commonjs。 支持 esm。 所以 编译工具 都会 转成浏览器 能识别的 模块化规范。

1、 多人协作开发  方式使用不同，  如果你要统一的话（一般情况下 能增加编译速度）。
2、 工具切换  例如：  webpack ->   vite    （直接写成 esm 形式   理论上  热更新更快）

commjs node12 之前环境是 不支持 esM

后面版本通过设置 package.json, type 设置 module 之后 就能支持esM

{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module"
}

浏览器支持 esM， 不支持 commonjs

commjs 导入 导出

CommonJS 规范的核心变量: exports、module.exports、require；

导入
require()
​
导出  exports、module.exports   引用地址是一个
module.exports = {}
​
exports.a = 1

esM 导入 导出

导入
import 
​
导出
const a = 1
const b = 2
export {a, b}
export const c = 3
​
export default = { } 导出默认的内容

同模块化标准

commonjs export

module.exports = {
    a: 1,
    b: 2,
    c: 3
}

commonjs import

require("./a")

结果

{
    a: 1,
    b: 2,
    c: 3
}

ESM

ESM export

export var a = 1;
export var b = 2;
export default = 3;

ESM import

import * as obj from "./a"

结果

{
    a: 1,
    b: 2,
    defalut: 3
}

import c from "./a"

结果

3

混导入 导出 ， 使用 webpack 工具 会出现什么结果？

不同模块化导入

es6 export

export var a = 1;
export var b = 2;
export default = 3;

commonjs import

require("./a")

结果

{
    a: 1,
    b: 2,
    defalut: 3
}

commonjs export

module.exports = {
    a: 1,
    b: 2,
    c: 3
}

ESM import

import * as obj from "./a"

import c from "./a"

结果

{
    a: 1,
    b: 2,
    c: 3
}

在我们开发适合，要选用一种开发方式，进行开发，不要混用。

混用会导致 转换工具额外的 工作量。

也会导致项目 混乱。

混用方式我们要知道导出 导入是什么，有可能三方 只支持一种规范。

额外多说一句 之前的html 文件 支持支es 5 现在也能支持es6+

在 HTML 中，<script type="module" src=""> 标签用于加载和执行 ES Modules（ECMAScript 模块）。

  <script type="module" src="">
        
    </script>