脚本宝典收集整理的这篇文章主要介绍了ES2015入门系列9-Babel和Rollup，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Babel is a JavaScript complier. Use next generation JavaScript today.

@H_406_12@

Babel是Javascript编译器，可以让我们现在就可以使用新的语法写JavaScript，而不用担心浏览器兼容的问题。

开始安装:

本系列假定读者都有NodeJS使用经验，如果还没有，赶紧去这里了解并安装吧。

我们可以使用

npm install --global babel-cli

这样全局安装Babel, 但是这并不是很好的做法，因为:

• 不同的项目可能需要依赖不同版本的Babel

• 不能绝对依赖某个版本的Babel，不够灵活

所以，最好的做法是为每一个项目安装Babel

创建项目目录并安装:

mkdir -p es2015-learning
cd es2015-learning

创建文件package.json, 里面放入以下内容：

@H_777_81@

{
  "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);

执行命令:

ain.js" tITle="" data-original-title="复制">

$ 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), 模块加载器有很多，如:

• webpack

• Browserify

但是今天我要介绍是另外一个: 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代码啦!

脚本宝典总结

以上是脚本宝典为你收集整理的ES2015入门系列9-Babel和Rollup全部内容，希望文章能够帮你解决ES2015入门系列9-Babel和Rollup所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。