ES Modules 的一些使用注意
ES Modules 的一些使用注意
ES 中的模块化规范,已经广泛使用了。它的特点如下:
- 通过给 script 添加 type = module 的属性,就可以以 ES Module 的标准执行其中的 JS 代码了
- ESM 自动采用严格模式,忽略 ‘use strict’
- 每个ES Modules都是运行在单独的私有作用域中
- ESM 是通过CORS的方式请求外部的JS模块的
- 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。
分为两步:
- 创建后缀名为 .mjs 的文件
- 运行 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