
Node.js中的Babel魔法:解锁ES6语法体验
在Node.js中通过babel体验ES6模块化,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、直接导入并执行模块代码
执行某个模块中的代码,并不需要得到模块中向外暴露的成员,此时,可以直接导入并执行模块代码
更多推荐
所有评论(0)