es6模块化

170 阅读1分钟

--es6的模块化--

前端模块化的发展

es6之前:
amd规范、cmd规范
es6之后:

  • es6模块化
  1. 每一个js文件都是一个独立的模块
  2. 导入其他模块使用import关键字
  3. 向外共享模块使用export
  • commonJS规范(nodejs)
  1. 导入其他模块使用require
  2. 向外共享模块使用module.exports关键字

让nodejs支持ES6模块化

node.js中默认支持CommonJS模块化规范,如果想基于node.js体验与学习ES6的模块化语法,需要按照如下两个步骤进行配置

  1. 确保安装了 v13.0.0 或更高版本的node.js
  2. 在package.json的根节点中添加 "type":"module"

1.png
注意-- 配置之后,则只能ES6模块化语法,不能再使用CommonJS语法了

es6模块化语法

一、默认导入导出

默认导出的语法:export deault 默认导出的成员
默认导入的语法: import接收名称from'模块路径'

2.png 注意:导入模块路径一定要带文件后缀名!!
每一个模块中,只允许使用唯一的一次 export default
默认导入时的接收名称可以任意名称,只要是合法的成员名称即可

二、按需导入导出

按需导出的语法: export const xx = xx
按需导入大语法: import{按需导入的名称} from '模块路径'

3.png 注意:导入模块路径一定要带文件后缀名!!
每个模块中可以有多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时,可以使用as关键字进行重命名

三、 默认导出和整体导出一起使用

4.png