ES2015入门系列9-Babel和Rollup

eccozhou 发布于2019-08-20 17:40 / 1104人阅读

摘要：虽然够好用，奈何没有浏览器对其可以完全支持，本文书写时间，开发版号称已经支持的特性。开始安装本系列假定读者都有使用经验，如果还没有，赶紧去这里了解并安装吧。到此，我们的已经准备就绪。

通过前面章节的讲解，大家对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), 模块加载器有很多，如:

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代码啦!

混合云超融合服务器 es6-系列入门系列课程深度学习入门系列课程 spark入门实战系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83760.html

ES2015入门系列11-模块 Modules

摘要：先来介绍下语法官方示例代码模块中对象暴露只需要即可，可以是任何类型的对象。手动导入模块下某个对象，需要和模块中定义的名字对应，顺序无关。看一下官方介绍： Language-level support for modules for component definition. JS在ES2015开始原生支持模块化开发，我们之前也曾借助于诸如： AMD CommonJS 等的模块加载...

HitenDev 2019-08-20 17:40 评论0 收藏0
package.json 非官方字段集合

摘要：非官方字段集合官方字段请参考。下面介绍的是非官方字段，也就是各种工具定义的相关字段。详细参考相关字段设置项目的浏览器兼容情况。相关字段测试库。相关字段代码检查与优化。 package.json 非官方字段集合 package.json 官方字段请参考 https://docs.npmjs.com/files/package.json。下面介绍的是非官方字段，也就是各种工具定义的相关字段...

denson 2019-08-23 11:56 评论0 收藏0
[译]教程：如何使用Rollup打包样式文件并添加LiveReload

摘要：通过这个教程学习如何使用打包工具配合来取代或处理样式文件。使用这个命令安装插件更新。如果你没有项目的副本，你可以通过这条命令克隆在结束这个状态下的项目为添加监听插件。在代码块内，添加如下内容简单起见我省略了文件的大部分内容通过这个教程学习如何使用JavaScript打包工具Rollup配合PostCSS来取代Grunt或Gulp处理样式文件。上一篇文章中，我们完成了使用Rollup...

garfileo 2019-08-20 12:25 评论0 收藏0
JS打包工具rollup——完全入门指南

摘要：使用进行模块化打包在之前打包的过程中，命令行中输出了一行，这表示并没有收到任何模块化的格式指令，因此会用默认的模块标准来对文件进行打包。前言最近在做一个提供给浏览器和node同时使用的js的url模板工具类，在用什么打包工具上纠结了一段时间，正好有一天在知乎上看到了关于rollup的介绍，在自己试了试之后，就决定用rollup.js来打包自己的工具类了。这篇文章主要是为了让对ro...

dreamtecher 2019-08-21 11:53 评论0 收藏0
Javascript 打包工具

摘要：所以，打包工具就出现了，它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具，，，，以发布时间为顺序。它定位是模块打包器，而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。本文当时写在本地，发现换电脑很不是方便，在这里记录下。前端的打包工具打包工具可以更好的管理html，css，javascript，使用可以锦上添花，不使用也没关系...

Sleepy 2019-08-23 18:03 评论0 收藏0