Node.js中的Babel魔法:解锁ES6语法体验

前言：在Node.js中通过babel体验ES6模块化，babel相关的配置；了解ES6模块化，能够默认导入导出、按需导入导出、直接导入并执行模块代码

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

babel是一个语法转换工具，可以把高级的、有兼容性的JavaScript代码转换为低级的、没有兼容性的JavaScript代码。

1、配置babel步骤

（1）在根目录终端npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

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

（2）在根目录终端npm install --save @babel/polyfill

npm install --save @babel/polyfill

（3）项目目录创建文件babel.config.js

（4）babel.config.js文件内容代码
const presets = […]: 定义了一个名为 presets 的常量数组，其中包含 Babel 的预设配置。
[“@babel/preset-env”, {…}]: 这个数组的第一项是一个包含两个元素的数组。第一个元素是字符串 “@babel/preset-env”，它指的是 Babel 的一个预设（preset），用于根据目标环境自动确定需要的 Babel 插件和 polyfill。第二个元素是一个对象，包含了具体的配置信息。
targets: { … }: 这个对象定义了 Babel 应该转换代码以支持的目标浏览器版本。它告诉 Babel 需要转换哪些特定的浏览器或平台上的 JavaScript 特性。

• edge: 17: 表示 Microsoft Edge 的版本 17。
• firefox: “60”: 表示 Firefox 的版本 60。
• chrome: “67”: 表示 Chrome 的版本 67。
• safari: “11.1”: 表示 Safari 的版本 11.1。

这些目标浏览器版本告诉 Babel 只转换那些在当前和旧版本中不存在的 JavaScript 特性。可自行对应需要的。
module.exports = { presets }: 将 presets 常量导出为一个模块，这样其他文件就可以通过 require或import 语句来使用这个配置。

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

（5）通过npx babel-node .\index.js执行代码
创建index.js，输入语句，执行npx babel-node .\index.js，打印出来
***这说明babel配置成功

npx babel-node .\index.js

2、创建babel.config.js提示为文件或文件名无效的问题！！！

• 文件名大小写错误：某些操作系统是区分大小写的，所以 Babel.config.js 和 babel.config.js是两个不同的文件名。 文件路径错误：确保你在项目的根目录下创建了 babel.config.js文件。
• 如果你的项目有多个子目录，确保文件名和路径是正确的。
• 文件名扩展名错误：确保文件扩展名是 .js，而不是其他格式。

二、ES6模块化的基本语法

1、默认导出与默认导入

默认导出语法 export default 默认导出的成员
默认导入语法 import 接收名称 from ‘模块标识符’

// 定义
let a=10
let b=20
let c=30
function show(){
    console.log("111");
}
// 将本模块中的成员暴露出去，供其它模块使用
export default {
    a,
    b,
    show
}

// 导入模块
import m1 from './m1.js'
// 打印结果
console.log(m1);

打印出结果：
注意：每个模块中，只允许使用唯一的一次export default，否则会报错！在一个模块中如果没有导出模块，会返回空对象{}*

2、按需导出与默认导入

按需导出语法export let s1=“a”
按需导入语法import {s1} from ‘模块标识符’

export let s1="a"
export let s2="b"
export function say(){
    console.log("222");
}

// 导入模块
import {s1,s2 as ss2,say} from './m1.js'
// 打印结果
console.log(s1,ss2,say);

注意：可以用as起别名；可以用n多次按需导出

3、直接导入并执行模块代码

执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码