Babel 转码器

Babel
是一个科普利用的 ES6 转码器,可以将 ES6 代码转为 ES5
代码,从而在现有条件举行。这意味,你可以用 ES6
的主意编写程序,又并非顾虑现有条件是否协理。
Babel 的配置文件是.babelrc,存放在项目标根目录下。使用 Babel
的率先步,就是布置这么些文件。该公文用来设置转码规则插件,基本格式如下。presets字段设定转码规则,官方提供以下的规则集,你可以按照需要安装。

{
  "presets": [],
  "plugins": []
}

使用 Babel

练手项目,学习
es6

预备干活

  1. 创造 src 目录和 dist 目录,src 目录存放 es6 语法情势的 js
    源代码。dist 存放编译后的源代码。
  2. 编写 index.html。
  3. 在 index.html 中引入 dist 目录下的文书。

开创一个新的 package.json 文件

在 learn-es6 的根目录下创办一个新的 package.json 文件。

npm init -y

安装看重

Babel 提供 babel-cli
工具,用于命令行转码。官方提供以下的规则集,你可以按照需要设置。

# ES2015转码规则
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

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

ECMAScript,在 package.json 中添加 scripts

"scripts": {
    "build": "babel src -d dist"
}

安排 .babelrc 配置文件

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

执行

实施以下命令的时候,就一定于履行了 babel src -d dist

npm run build

参考资料

Babel
入门教程

ECMAScript 6
入门

何以更进一步?

在学习过程中,每一次修改代码,我都要举行一下“npm run
build”,这一个操作看起来还不是很麻烦,可是当工程相比大的时候,操作再多一点儿,这恐怕就会变成令人咳嗽的、繁琐的操作。我在想能不可以简化这个流程。我修改完代码,自动执行编译过程,可以品尝用
gulp 来落实这些考虑。
gulp 自动化构建工具