成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES2015入門系列9-Babel和Rollup

eccozhou / 1209人閱讀

摘要：雖然夠好用，奈何沒有瀏覽器對其可以完全支持，本文書寫時間，開發(fā)版號稱已經(jīng)支持的特性。開始安裝本系列假定讀者都有使用經(jīng)驗，如果還沒有，趕緊去這里了解并安裝吧。到此，我們的已經(jīng)準備就緒。

通過前面章節(jié)的講解，大家對ES2015的一些新語法有了初步的理解，之前我們的測試代碼都可以直接放入 Chrome Console 中直接運行，為了更好的學習后面的面向?qū)ο蠛湍K開發(fā)，我先用一章介紹一下 Babel 和 Rollup。

ES2015雖然夠好用，奈何沒有瀏覽器對其可以完全支持，本文書寫時間，Chrome開發(fā)版號稱已經(jīng)支持99%的ES2015特性。

所以，我們需要借助一個可以幫助我們將ES6代碼翻譯為瀏覽器都100%支持的ES5代碼的工具，這就是本文的主角之一：Babel。

打開Babel官網(wǎng), 可以看到大大的介紹：

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

Babel是Javascript編譯器，可以讓我們現(xiàn)在就可以使用新的語法寫JavaScript，而不用擔心瀏覽器兼容的問題。

開始安裝:

本系列假定讀者都有NodeJS使用經(jīng)驗，如果還沒有，趕緊去這里了解并安裝吧。

我們可以使用

npm install --global babel-cli

這樣全局安裝Babel, 但是這并不是很好的做法，因為:

不同的項目可能需要依賴不同版本的Babel

不能絕對依賴某個版本的Babel，不夠靈活

所以，最好的做法是為每一個項目安裝Babel

創(chuàng)建項目目錄并安裝:

mkdir -p es2015-learning
cd es2015-learning

創(chuàng)建文件package.json, 里面放入以下內(nèi)容：

{
  "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安裝在項目中，所以我們無法直接在命令行中執(zhí)行 babel 命令，雖然可以用

./node_modules/.bin/babel

調(diào)用， 但是為了方便，我們需要在 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

直接調(diào)用Babel為我們在src中的js代碼進行編譯到dist文件夾中，而不用每次都

./node_modules/.bin/babel src -d dist

很簡單，對吧？那趕緊試試看:

創(chuàng)建文件夾

mkdir src
mkdir dist

在 src 中創(chuàng)建文件 main.js, 編輯代碼:

const PI = 3.1415926;
alert(PI);

執(zhí)行命令:

$ npm run build
//輸出
src/main.js -> dist/main.js

查看dist文件夾中的main.js文件，不出意外，babel 并沒有為我們做任何的轉(zhuǎn)變，因為：Babel 在 6.0以后不在默認啟用代碼轉(zhuǎn)換，實際上Babel默認沒有自帶任何轉(zhuǎn)換插件，這需要我們手動安裝一下，這里需要安裝ES2015 Preset插件

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

安裝完成后，還需要告訴Babel啟用該插件，創(chuàng)建.babelrc文件，并在其中加入如下內(nèi)容，

{
  "presets": ["es2015"]
}

準備就緒，再次執(zhí)行:

npm run build

完成后，可以看到現(xiàn)在的dist/main.js已經(jīng)被轉(zhuǎn)換為：

"use strict";

var PI = 3.1415926;
alert(PI);

這時候引用dist/main.js 到瀏覽器中，會一切運行正常。

到此，我們的Babel已經(jīng)準備就緒^_^。

但是，讓我們再看看下面的代碼:

// src/Human.js
export default class Human{

}
// src/main.js
import  Human from "./Human.js";

class Man extends Human{

}

let man = new Man();

執(zhí)行

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

創(chuàng)建 rollup.config.js 文件，內(nèi)容加入:

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 結(jié)合起來。

安裝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代碼啦!

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83760.html

相關(guān)文章

  • ES2015入門系列11-模塊 Modules

    摘要：先來介紹下語法官方示例代碼模塊中對象暴露只需要即可，可以是任何類型的對象。手動導(dǎo)入模塊下某個對象，需要和模塊中定義的名字對應(yīng)，順序無關(guān)。 看一下官方介紹： Language-level support for modules for component definition. JS在ES2015開始原生支持模塊化開發(fā)，我們之前也曾借助于諸如： AMD CommonJS 等的模塊加載...

    HitenDev 評論0 收藏0

  • package.json 非官方字段集合

    摘要：非官方字段集合官方字段請參考。下面介紹的是非官方字段，也就是各種工具定義的相關(guān)字段。詳細參考相關(guān)字段設(shè)置項目的瀏覽器兼容情況。相關(guān)字段測試庫。相關(guān)字段代碼檢查與優(yōu)化。 package.json 非官方字段集合 package.json 官方字段請參考 https://docs.npmjs.com/files/package.json。下面介紹的是非官方字段，也就是各種工具定義的相關(guān)字段...

    denson 評論0 收藏0

  • [譯]教程：如何使用Rollup打包樣式文件并添加LiveReload

    摘要：通過這個教程學習如何使用打包工具配合來取代或處理樣式文件。使用這個命令安裝插件更新。如果你沒有項目的副本，你可以通過這條命令克隆在結(jié)束這個狀態(tài)下的項目為添加監(jiān)聽插件。在代碼塊內(nèi)，添加如下內(nèi)容簡單起見我省略了文件的大部分內(nèi)容 通過這個教程學習如何使用JavaScript打包工具Rollup配合PostCSS來取代Grunt或Gulp處理樣式文件。 上一篇文章中，我們完成了使用Rollup...

    garfileo 評論0 收藏0

  • JS打包工具rollup——完全入門指南

    摘要：使用進行模塊化打包在之前打包的過程中，命令行中輸出了一行，這表示并沒有收到任何模塊化的格式指令，因此會用默認的模塊標準來對文件進行打包。 前言 最近在做一個提供給瀏覽器和node同時使用的js的url模板工具類，在用什么打包工具上糾結(jié)了一段時間，正好有一天在知乎上看到了關(guān)于rollup的介紹，在自己試了試之后，就決定用rollup.js來打包自己的工具類了。 這篇文章主要是為了讓對ro...

    dreamtecher 評論0 收藏0

  • Javascript 打包工具

    摘要：所以，打包工具就出現(xiàn)了，它可以幫助做這些繁瑣的工作。打包工具介紹僅介紹款主流的打包工具，，，，以發(fā)布時間為順序。它定位是模塊打包器，而屬于構(gòu)建工具。而且在其他的打包工具在處理非網(wǎng)頁文件比如等基本還是需要借助它來實現(xiàn)。 本文當時寫在本地，發(fā)現(xiàn)換電腦很不是方便，在這里記錄下。 前端的打包工具 打包工具可以更好的管理html，css，javascript，使用可以錦上添花，不使用也沒關(guān)系...

    Sleepy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<