ES Modules 的一些使用注意

ES Modules 的一些使用注意

ES 中的模块化规范，已经广泛使用了。它的特点如下：

1. 通过给 script 添加 type = module 的属性，就可以以 ES Module 的标准执行其中的 JS 代码了
2. ESM 自动采用严格模式，忽略 ‘use strict’
3. 每个ES Modules都是运行在单独的私有作用域中
4. ESM 是通过CORS的方式请求外部的JS模块的
5. ESM 的 script 标签会延迟执行脚本

使用时的注意点

export 导出时 可以写成

let one = 1
let two = 2
export let msg = "somethings"
export { one,two }

import 导入时 写成

import { msg,one,two } from 'xxx'

• 这里的 export {} 和 import {} 不是对象的解构！ 是固定语法
• export 导出的值 并不是把这个值拷贝了一份！只是暴露一个引用关系。
  并且import导入的是一个只读的，我们不能在模块外去修改这个值
• export { one , two } from xxx 表示把所有的导入成员直接导出，这样一来在当前模块就无法访问它们了

ESM 动态导入模块

ESM 动态导入模块的写法

	// default 是解构出其中的默认导出值
	import (path).then( { default }=>{ } )

在node中使用ESM

只要node的版本在8.5以上 就可以尝试去使用ESM。
分为两步：

1. 创建后缀名为 .mjs 的文件
2. 运行 node –experimental-modules .\文件名.mjs 即可

如果node版本在12以上 ，还有第二种方法:

• 添加package.json文件
• 在其中添加 type 属性, 值为 “module” ---- "type": "module"
• 这样使用esm的文件 就不需要该后缀了
• 但是如果是用commonJs的文件 则需要该后缀名为 .cjs

node环境下 ES Modules 中导入CommonJS 暴露的成员

在esm中可以导入CommonJs规范暴露的成员，意思就是 你可以在代码中使用 import (esm规范) 来导入module.exports (commonJS规范) 暴露的成员。

// commonjs.js
// CommonJS 模块始终只会导出一个默认成员

 module.exports = {
   foo: 'commonjs exports value'
 }

// esm.js
// ES Module 中可以导入 CommonJS 模块

 import mod from './commonjs.js'
 console.log(mod)

这里要注意：

• 不能使用 import { } from xx 的语法 ，
• 以及 在原生node环境下 不能在 CommonJS 模块中通过 require 载入 ES Module