es6 入门-优快云博客

本文介绍如何使用Babel配置文件进行ES6到ES5的代码转换，并提供了详细的步骤指南，包括如何检查Node环境对ES6的支持情况、安装和配置Babel及其插件等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.node 支持度更高，选择在node中试验。

cnpm install -g es-checker 使用es-checker检测node环境对es6支持情况。

2.babel配置文件

.babelrc文件，但是推荐使用package.json

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    // my babel config here
  }
}

然后执行babel配置（规则配置和插件配置）

"presets": [],
  "plugins": []

然后安装需要的规则

$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

3.babel进行es6,5之间的转换，推荐安装到项目本地

npm install --save-dev babel-cli

$ npm install --global babel-cli

基本用法如下。

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s