经由过程前面章节的解说，人人对ES2015的一些新语法有了开端的明白，之前我们的测试代码都能够直接放入 Chrome Console 中直接运转，为了更好的进修背面的面向对象和模块开辟，我先用一章引见一下 Babel 和 Rollup。
ES2015虽然够好用，怎样没有阅读器对其能够完整支撑，本文誊写时刻，Chrome开辟版号称已支撑99%的ES2015特征。
所以，我们须要借助一个能够协助我们将ES6代码翻译为阅读器都100%支撑的ES5代码的东西，这就是本文的主角之一：Babel。
翻开Babel官网, 能够看到大大的引见：
Babel is a JavaScript complier. Use next generation JavaScript today.
Babel是Javascript编译器，能够让我们如今就能够运用新的语法写JavaScript，而不必忧郁阅读器兼容的题目。
最先装置:
本系列假定读者都有NodeJS运用履历，假如还没有，赶忙去这里相识并装置吧。
我们能够运用
npm install --global babel-cli如许全局装置Babel, 然则这并非很好的做法，因为:
差别的项目能够须要依靠差别版本的Babel
不能相对依靠某个版本的Babel，不够天真
所以，最好的做法是为每个项目装置Babel
建立项目目次并装置:
mkdir -p es2015-learning
cd es2015-learning建立文件package.json, 内里放入以下内容：
{
"name": "es2015-learning",
"version": "1.0.0"
}装置Babel:
npm install --save-dev babel-cli装置完成后，我们的package.json文件会变成相似下面的：
{
"name": "es2015-learning",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.9.0"
}
}因为我们的babel装置在项目中，所以我们没法直接在敕令行中实行 babel 敕令，虽然能够用
./node_modules/.bin/babel挪用， 然则为了轻易，我们须要在 package.json 中定义敕令运用，修正 package.json 以下：
{
"name": "es2015-learning",
"version": "1.0.0",
"scripts": {
"build": "babel src -d dist"
},
"devDependencies": {
"babel-cli": "^6.9.0"
}
}如许，我们就能够运用
npm run build直接挪用Babel为我们在src中的js代码举行编译到dist文件夹中，而不必每次都
./node_modules/.bin/babel src -d dist很简单，对吧？那赶忙碰运气:
建立文件夹
mkdir src
mkdir dist在 src 中建立文件 main.js, 编辑代码:
const PI = 3.1415926;
alert(PI);实行敕令:
$ npm run build
//输出
src/main.js -> dist/main.js检察dist文件夹中的main.js文件，不出不测，babel 并没有为我们做任何的改变，因为：Babel 在 6.0今后不在默许启用代码转换，实际上Babel默许没有自带任何转换插件，这须要我们手动装置一下，这里须要装置ES2015 Preset插件
npm install babel-preset-es2015 --save-dev装置完成后，还须要通知Babel启用该插件，建立.babelrc文件，并在个中到场以下内容，
{
"presets": ["es2015"]
}准备就绪，再次实行:
npm run build完成后，能够看到如今的dist/main.js已被转换为：
"use strict";
var PI = 3.1415926;
alert(PI);这时刻援用dist/main.js 到阅读器中，会统统运转一般。
到此，我们的Babel已准备就绪^_^。
然则，让我们再看看下面的代码:
// src/Human.js
export default class Human{
}
// src/main.js
import Human from './Human.js';
class Man extends Human{
}
let man = new Man();实行
npm run build检察 dist/main.js代码(部份):
'use strict';
var _Human2 = require('./Human.js');
...
...这个时刻假如我们在阅读器中援用main.js, 很遗憾是没法运转的，因而，我们还须要一个模块加载器 (module bundler), 模块加载器有许多，如:
然则本日我要引见是别的一个: Rollup
the next-generation JavaScript module bundler
下一代JavaScript模块加载器，赶忙来熟悉熟悉吧!
装置:
npm install --save-dev rollup建立 rollup.config.js 文件，内容到场:
module.exports = {
entry: 'src/main.js',
dest: 'dist/main.js'
}尝试一下：
./node_modules/.bin/rollup -c编译出来的dist/main.js代码以下：
'use strict';
class Human {
}
class Man extends Human {
}
let man = new Man();很圆满对不对? 然则，不支撑ES2015的阅读器怎么办？不必怕，我们将 Babel 和 Rollup 结合起来。
装置rollup的babel插件:
npm install --save rollup-plugin-babel
npm install --save babel-preset-es2015-rollup修正rollup.config.js为:
let babel = require('rollup-plugin-babel');
module.exports = {
entry: 'src/main.js',
plugins: [babel()],
dest: 'dist/main.js'
}修正.babelrc为:
{
"presets": ["es2015-rollup"]
}再次运转:
./node_modules/.bin/rollup -c此时的dist/main.js代码就能够被支撑ES5的阅读器运用了!
末了我们修正我们的packages.json的build敕令为:
"build": "rollup -c"背面只需运转:
npm run build就能够享用Babel和Rollup带来的方便, 轻松运用ES2015语法编写JS代码啦!
