JavaScript中ES6 Babel正确安装过程

Babel在线转换工具

本文阐述Babel 6.x版本的安装步骤。首先，可利用Babel在线转换工具 https://babeljs.io/repl/

接着介绍核心主题：在命令行环境中安装Babel（适用于Babel 6.x版本）

Babel命令行环境安装

1、首要步骤是安装babel-cli（用于在终端执行babel命令）

npm install -g babel-cli

2、随后安装babel-preset-es2015插件

npm install --save babel-preset-es2015

注意：Babel 5版本默认集成各类转换插件，但Babel 6.x需手动下载相关插件，例如transform-es2015-arrow-functions、transform-es2015-classes等。ES2015 preset已包含所有插件。若未安装任何插件，命令行转换将无效！

其中--save参数会自动更新package.json文件，并将内容写入依赖项

3、在命令行中输入以下命令：

babel es6.js --presets es2015

输出结果如下：

　"use strict";
　　[1, 2, 3].map(function (x) {
　　 return x * x;
　　});

注意：参数--presets es2015表示指定使用该插件进行编译，若省略此参数，转换无法生效。

Babel插件配置方法

4、插件配置方法

每次手动输入该参数较为繁琐，可在当前目录下新建配置文件.babelrc。

然而，在Windows系统中，不允许直接通过右键创建无文件名的文件，可通过cmd命令行创建：在当前文件夹打开cmd并执行命令

type nul>.babelrc

即可在当前目录下生成文件.babelrc，接着在文件中写入以下内容：

　{
　　　"presets": ['es2015']
　} 

如此便可在命令行中直接使用babel es6.js进行转换，无需额外添加表明所用插件的参数

除建立.babelrc文件外，也可在package.json中进行配置，添加以下属性即可：

"babel": {
　　"presets": ["es2015"]
}

Babel常用命令汇总

附Babel常用命令列表：

1、转换es6.js文件并在当前命令行程序窗口中输出结果

babel es6.js

2、将es6.js转换后输出至es5.js文件中（使用 -o 或 --out-file 参数）

babel es6.js -o es5.js

babel es6.js --out-file es5.js

3、实时监控es6.js文件，一旦发生变化即重新编译（使用 -w 或 --watch 参数）

babel es6.js -w --out-file es5.js babel es6.js --watch --out-file es5.js

4、编译整个src文件夹并输出至lib文件夹中（使用 -d 或 --out-dir 参数）

babel src -d lib babel src --out-dir lib

5、编译整个src文件夹并输出到单个文件中

babel src --out-file es5.js

6、直接输入babel-node命令，可在命令行中直接运行ES6代码

babel-node

以上所述是小编给大家介绍的JavaScript中ES6 Babel正确安装过程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！