ES6模块化基本概念
- 每个js文件都是一个独立的模块
- 导入其他模块时，需要使用import关键字
- 向外共享模块时，需要使用export关键字
在nodejs中搭建学习ES6模块化的环境
- 首先需要确保安装了v13.0.0 或更高版本的 node.js
- 在 package.json 的根节点中添加
"type": "module"节点
默认导入导出
语法如下
//默认导出
export default {
name: '薛之谦',
age: 22
}
//默认导入
import obj from './tool.js'
console.log(obj)
注意：
- 注意这里的路径有后缀名.js
- 这里的obj只是一个导入的时候接收的名字，可以随便取的
- 每个模块中，只允许使用唯一的一次 export default
按需导入导出
语法如下
//按需导出
export const age = 18
export const fn = () => {
console.log('fn')
}
//按需导出
//变量可以改名字， 旧的变量名 as 新的变量名，输出是新的变量名
import { age as xzq, fn } from './tool.js'
console.log(xzq)
console.log(fn)
注意：
- 每个模块中可以有多次按需导出
- 按需导入的成员名称必须和按需导出的名称保持一致
- 按需导入时，可以使用 as 关键字进行重命名
默认导出和按需导出一起使用
//按需导出和默认导出
export const age = 18
export const fn = () => {
console.log('fn')
}
export default {
a: 1
}
import obj, { age as xzq, fn } from './tool.js'
console.log(xzq)
console.log(obj)
console.log(fn)
让chrome浏览器支持ES6模块化
index.html
只需要在引入js文件的时候，加上一个属性type="module"就可以了
<!DOCTYPE html>
<html lang="zh">
注意这里的module
<script type="module" src="./index.js"></script>
</html>
index.js
import {a,b} from './tool.js'
console.log(a,b)
tool.js
export const a = 1
export const b = 2
