ES6代码转ES5教程(babel安装使用教程)

需要用到的软件

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

如果觉得麻烦还可以通过网上在线转换1在线转换2

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页