原文： 一篇理解前端模块化：AMD、CMD、CommonJS、ES6
01. 环境搭建
步骤1: 下载babel
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill
步骤2: 在项目根目录创建文件 babel.config.js
步骤3: babel.config.js 文件内容填写配置信息代码
const presets = [
["@babel/env", {
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
}
}]
];
module.exports = { presets };
步骤4: 通过 npx babel-node index.js 执行代码
02. es6模块的导入和导出
1. 默认导出与导入export default
语法：
默认导出：export default
默认导入：import 接收名称 from '模块标识符'
举例：
新建m.js文件，写入如下代码，把变量和方法导出
let a = 10;
let b = 20;
function fn(){}
export default{
a,
b,
fn
}
新建index.js，用import导入m.js中的代码
import m from './m.js'
console.log(m)
执行：
npx babel-node index.js
结果：
图片
注意：每个模块中，只允许使用一次 export default。
2. 按需导入和按需导出
语法：
按需导出：export let s1 = 10
按需导入：import { s1 } from '模块标识符'
举例：
在m.js中：
export let s1 = 10;
在index.js中：
import { s1 } from './m.js'
console.log(s1)
执行：
npx babel-node index.js
结果：
图片
3. 直接导入并执行模块代码
举例：
在m.js中：
for(var i = 0;i<3;i++){
console.log(i)
}for(var i = 0;i<3;i++){
在index.js中
import './m.js'
执行：
npx babel-node index.js
结果：
图片
所以：模块化的好处，方便了代码重用和维护，提升了开发效率。
