ES6 本地实时转换 ES5 语法 (供学习使用)
在线转换如下 babeljs 这里讲解本地转换和本地实时准换,供学习 ES6 和 ES5 的语法对比使用, 实际上 babel 是在项目中依托于 webpack,这里单独提出来供学习对比语法使用
- 确保你已经安装好
nodejs
- 创建一个项目文件夹,比如
babel-js
- 进入到项目,执行
npm init -y
来初始化package.json
,我个人使用的 VScode,比较方便 - 在终端 Terminal 执行命令
npm i -D @babel/core @babel/cli @babel/preset-env webpack
,当然,我会选择使用cnpm
安装比较快 - 在项目文件夹
babel-js
的根目录创建.babelrc
,内容如
{
"presets": ["@babel/preset-env"]
}复制代码
按照上述操作,配置就算完成了,接下来就是写ES6
语法转换成ES5
的问题了 根目录下创建src
目录,新建index.js
,写入要转换的语法
// index.js
const PI = 3.14;
const sum = (x, y) => x + y;
const { name, age } = {
name: "lcy",
age: 18
}复制代码
// index2.js
const PI = 3.1415926;
const sum = (x, y) => x + y;
const { name, age } = {
name: "lcy",
age: 18
}复制代码
非实时转换
如果不是实时监控语法转换,需要执行一次命令转换一次
- 转换为单个文件
执行如下命令即可 npx babel src/index.js -o dist/test.js
这样就会在dist
目录下生成一个test.js
,里面就是准换成功的ES5
语法了。
当然,如果你的src
只有一个index.js
,执行命令可以省略这个index.js
npx babel src -o dist/test.js
,不过这样做就是把src
下面的所有的js
文件转换成ES5
后合并到test.js
中,src
目录下文件多了容易眼花缭乱,如下图。还是推荐上面一种,不要省略。
- 多个文件分别转换
转换整个文件夹,并且不要合并到一个js
中,执行如下命令: npx babel src -d dist
这样对应src
文件目录,有多少个js
就单独转换为多少个js
,不会合并在一个js
实时监控转换
执行如下命令 npx babel src -w -d dist
效果图如下:
原文地址 cloud.tencent.com 上面内容的仓库地址:ES6 本地实时转换 ES5 语法代码仓库
本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】