ES6代码转ES5详细教程(babel安装使用教程)
slongzhang_ 人气:0需要用到的软件
Node.js + babel
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});进入正题，安装babel(安装之前请确保你已安装了node.js)
babel建议在项目中安装，不建议全局安装；
选择项目目录或新建一个目录，如E:/wwwroot/babel_test
安装命令：
npm install --save-dev @babel/core
Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下。
{
"presets": [],
"plugins": []
}presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
# 最新转码规则 $ npm install --save-dev @babel/preset-env # react 转码规则 $ npm install --save-dev @babel/preset-react
然后，将这些规则加入.babelrc。
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}注意，以下所有 Babel 工具和模块的使用，都必须先写好.babelrc。
命令行转码
Babel 提供命令行工具@babel/cli，用于命令行转码。
它的安装命令如下。
npm install --save-dev @babel/cli
基本用法如下。
# 转码结果输出到标准输出 $ npx babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 npx babel example.js --out-file compiled.js # 或者 npx babel example.js -o compiled.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 npx babel 源目录 --out-dir 转后目录 # 或者 npx babel 源目录 -d 转后目录 # -s 参数生成source map文件 npx babel 源目录 -d 转后目录 -s
加载全部内容