模块化开发规范ES Module注意事项


CommonJs规范

  • 一个文件就是一个模块
  • 每个模块都有单独的作用域
  • 通过Module.exports导出成员
  • 通过require函数载入模块
    CommonJs是以同步模式加载模块，CommanJs是为Node.js环境提出的模块化规范

模块化标准规范

在node环境中用CommonJs组织模块，在浏览器环境中用ESModules组织模块

ES Modules基本特性

  • ESM 自动采用严格模式，忽略 ‘use strict’
  • 每个ES Module 都运行在单独的私有作用域中
  • ESM 是通过CORS 的方式请求外部Js，如果不在同源地址下，需要我们请求的服务端地址必须提供一个CORS标头
  • ESM 的 script 标签会延迟执行脚本，是在我们页面渲染完毕之后再去执行脚本让他不影响页面的显示

ES Modules导出

  1. export写在声明变量之前，导出声明的变量、方法、类等
  2. 不写在变量声明之前，在最末尾以export { 成员1，成员2，成员3}这种形式导出
  3. 重命名形式在 结尾的export中 用as关键词重命名在外部模块导入时只能用重命名之后的名字导入

ES Modules导入导出的注意事项

  1. 导出的写法他只是一种特殊的写法并不是导出了一个对象
  2. 导出的只是一个引用关系而不是复制过去一个值，在外部环境中导入的变量他引用的就是导出这个变量的值，本身就是一个东西
  3. 这个暴露出来的引用关系是一个只读的属性，并不能在外部改变这个变量的值

ES Modules导出注意事项

  1. import { } from ’ ’ 后面必须是完整的文件路径不能省略后缀名
  2. 引用相对路径的时候文件名前面的./不能省略掉
  3. from后面也可以用完整的url路径去引用cdn上的模块文件
  4. 如果一个模块的成员特别多可以采用星号把所有的成员都提取出来
1
import * from './index.js'
  1. 动态调用模块
1
2
3
4
// 使用import函数传入要调用模块的路径，返回一个promise 用.then方法里面的要调用的变量用回调函数参数的方法调用
import('./module.js).then(function (module){
    console.log(module)
})

ES Modules导入导出成员

有时我们在components文件中有许多个组件，如果我们想要在外部使用时要分别导入我们想要的组件就会很麻烦，如果我们在components的文件夹下新建一个index.js文件在里面执行

1
2
3
4
5
export { Button } from './Button.js'
export { Avatar } from './Avatar.js'
export { Input } from './Input.js'

//这种写法可以直接导出导入的成员

此时我们外部想使用components中的组件可以集中引入index.js的导入的成员 起到一个整合的作用

1
import { Button, Avatar, Input } from './components/index.js'

在Node环境使用ES Module

  1. 在导出变量的文件中将扩展名.js文件变更为.mjs
  2. 在执行命令的时候在node后面加上 --experimental-modules，如今在node环境中使用ES Module只是在实验阶段，更多还是使用CommanJs
1
node --experimental-modules index.mjs
  1. 在node中用ES Module引入模块时第三方模块不支持ES Module引用因为第三方模块都是默认导出成员，但是node内置模块比如fs已经兼容了ESM的到处成员方式
1
2
3
4
5
6
7
8
9
// 会报错
import { camelCase } from 'lodash'
console.log(camelCase('ES Module'))
// 不会报错 导入的时默方式导出的成员
import _ from 'lodash'
console.log(_.camelCase('ES Module'))
// 不会报错 内置模块已经被ESM 方式兼容
import { writeFileSync } from 'fs'
writeFileSync('./bar.txt', 'es module working')

ES Module和 CommonJs的交互

  • ES Module中可以导入CommonJs模块
  • CommonJs不可以导入ES Module模块
  • CommonJs始终只会导出一个默认成员