本文共 1356 字，大约阅读时间需要 4 分钟。

1. Node.js 中通过 babel 体验 ES6 模块化

① npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

② npm install --save @babel/polyfill ③ 项目跟目录创建文件 babel.config.js ④ babel.config.js 文件内容如右侧代码 ⑤ 通过 npx babel-node index.js 执行代码 下面这个代码来限制启动babel最低的浏览器版本

const presets = [	["@babel/env", {		targets: { 			edge: "17", 			firefox: "60", 			chrome: "67", 			safari: "11.1" 			} 		}] 	]; module.exports = { presets };

2. 默认导出 与 默认导入

默认导出语法 export default 默认导出的成员

默认导入语法 import 接收名称 from ‘模块标识符’ 导出的文件

// 当前文件模块为 m1.js// 定义私有成员 a 和 clet a = 10let c = 20// 外界访问不到变量 d ,因为它没有被暴露出去let d = 30function show() {}// 将本模块中的私有成员暴露出去，供其它模块使用export default { a, c, show}

导入的文件

// 导入模块成员 import m1 from './m1.js' console.log(m1) // 打印输出的结果为： // { a: 10, c: 20, show: [Function: show] }

注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！

3. 按需导出 与 按需导入

按需导出语法 export let s1 = 10

按需导入语法 import { s1 } from ‘模块标识符’ 导出的文件

// 当前文件模块为 m1.js// 向外按需导出变量 s1export let s1 = 'aaa' // 向外按需导出变量 s2export let s2 = 'ccc'// 向外按需导出方法 sayexport function say = function() {}

导入的文件

// 导入模块成员 import { s1, s2 as ss2, say } from './m1.js' console.log(s1) // 打印输出 aaa console.log(ss2) // 打印输出 ccc console.log(say) // 打印输出 [Function: say]

注意：每个模块中，可以使用多次按需导出

4.直接导入并执行模块代码

导出的文件

// 当前文件模块为 m2.js// 在当前模块中执行一个 for 循环操作for(let i = 0; i < 3; i++) { console.log(i)}

导入的文件

// 直接导入并执行模块代码 import './m2.js'

转载地址：http://nwmzi.baihongyu.com/