JS模块化相关规范

1. 安装依赖包

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

2. 新建babel.config.js文件，进行如下配置：
   

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

module.exports = { presets }

3. 测试一下，新建index.js

// index.js测试代码
console.log('done');

在控制台输入：

npx babel-node index.js

到目前为止，说明我们的babel已经配置完成，现在开发环境已经支持ES6的高级特性了(比如模块化导入)

上代码测试一下：
新建一个m1.js文件

let a = 10
let b = 20
let c = 30

function show(){
    console.log('xxx')
}

export default {
    a,
    b,
    show
}

下面是index.js文件

import m1 from './m1'

console.log(m1)

在控制台输入：

npx babel-node index.js

结果：

注意：在每个模块中，只允许使用唯一的一次export default,否则会报错，但是按需导出可以导出多次并且可以和默认导出并存

上代码：
m1.js

index.js:



上代码：

// m2.js
// 没有向外部暴露任何变量
for (let i = 0; i < 3; i++) {
    console.log(i)
}

// index.js
// 直接import m2.js文件
import './m2'

结果：