通过 babel 体验 ES6 模块化

原文： 一篇理解前端模块化：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

结果：

图片

所以：模块化的好处，方便了代码重用和维护，提升了开发效率。

原文： 一篇理解前端模块化：AMD、CMD、CommonJS、ES6