亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

babel——下一代 JavaScript 語法的編譯器

JeOam / 1905人閱讀

摘要：寫在前面環(huán)境是默認(rèn)支持的，但我們需要使用來滿足我們使用新特性的需求。以下內(nèi)容為了不讓項(xiàng)目產(chǎn)生環(huán)境依賴，沒有使用全局安裝的方式。這里舉一個(gè)使用的例子現(xiàn)在想使用的，我們需要先安裝和然后配置文件此時(shí)就可以用對(duì)轉(zhuǎn)碼了。腳本中打開的命令如下

寫在前面：Node 環(huán)境是默認(rèn)支持 ECMAScript6 的，但我們需要使用 babel 來滿足我們使用新特性的需求。
以下內(nèi)容為了不讓項(xiàng)目產(chǎn)生環(huán)境依賴，沒有使用全局安裝的方式。你可以新建一個(gè)文件夾，在其內(nèi)部執(zhí)行。
瀏覽器環(huán)境 
babel 6 開始不再支持瀏覽器環(huán)境, 如果你使用的是 babel 6+ , 那么你需要以構(gòu)建工具, 這里僅使用 babel 5

終端運(yùn)行一下命令安裝 babel:

npm install babel-core@5

mac中, 將以下路徑j(luò)s文件引入 html 中：

node-modules/babel-core/browser.js



  
  Babel in Browser
node環(huán)境

node 環(huán)境本身是支持 ES6 的, 不過它提供了把 ES6 的代碼轉(zhuǎn)換為 ES5 的方法：
在項(xiàng)目目錄中執(zhí)行：

# ES2015轉(zhuǎn)碼規(guī)則
npm install --save-dev babel-preset-2015

# react轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-react

# ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則(0 表示完全支持)
$ npm install --save-dev babel-preset-stage-0

然后在項(xiàng)目根目錄下創(chuàng)建.babelrc 文件:

{
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "plugins": []
  }

這個(gè)文件很重要，添加插件都有編輯這個(gè)文件。

還可以用一個(gè)鉤子關(guān)聯(lián).ES6 .es .jsx .js文件

npm install --save-dev babel-register

方法是在入口腳步頭部加入：

require("babel-register");

當(dāng)然以上方法不會(huì)對(duì) ES6 特有的類、對(duì)象、方法進(jìn)行轉(zhuǎn)換, 如果需要應(yīng)安裝 babel-polyfill 模塊：

npm install babel-polyfill --save

并在所有腳步頭部加入：

require("babel-polyfill");
//or
import "babel-polyfill";
命令行環(huán)境

在項(xiàng)目目錄中執(zhí)行：

npm install --save-dev babel-cli

之后繼續(xù)執(zhí)行以下代碼就進(jìn)入 ES6 的 REPL 環(huán)境, 可以直接運(yùn)行 ES6 代碼：

babel-node

如果執(zhí)行 js 文件, 可以：

babel-node ES6Node.js

還有一下命令把 ES6 代碼轉(zhuǎn)換為 ES5 代碼：

# 轉(zhuǎn)換為 ES5 并輸出代碼
babel ES6.js

# 轉(zhuǎn)換 ES6.js 并輸出到指定文件
babel ES6.js -o ES5.js

# 轉(zhuǎn)換整個(gè)文件夾中的 ES6 代碼文件到 ES5
babel -d build-dir source-dir

# 轉(zhuǎn)換整個(gè)文件夾中的 ES6 代碼文件到 ES5, 并生成 source.map
babel -d build-dir source-dir -s

此外還有 babel 的在線轉(zhuǎn)碼器：https://babeljs.io/repl

JS 文件內(nèi)

之前已經(jīng)安裝了 babel-core 就可以在 JS 文件內(nèi)使用 babel:

var babel = require("babel-core");

// 字符串轉(zhuǎn)碼
babel.transform("code();", options);
// => { code, map, ast }

// 文件轉(zhuǎn)碼（異步）
babel.transformFile("filename.js", options, function(err, result) {
  result; // => { code, map, ast }
});

// 文件轉(zhuǎn)碼（同步）
babel.transformFileSync("filename.js", options);
// => { code, map, ast }

// Babel AST轉(zhuǎn)碼
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

之后可以直接用以下代碼轉(zhuǎn)碼:

var ES6Code = "let x = n => n + 1";
var ES5Code = require("babel-core").transform(ES6Code, {
  "presets": ["es2015"]
}).code;

得到如下代碼：

`"use strict";
var x = function x(n){
  return n + 1;
};`

配置對(duì)象options，可以參看官方文檔http://babeljs.io/docs/usage/options/。

這里舉一個(gè)使用的例子：
現(xiàn)在想使用 babel 的 Decorator，我們需要先安裝 babel-core 和 babel-plugin-transform-decorators

npm install babel-core babel-plugin-transform-decorators

然后配置 .babelrc 文件:

{
  plugins: ["transform-decorators"]
}

此時(shí)就可以用 babel 對(duì) Decorator 轉(zhuǎn)碼了。
腳本中打開的命令如下：

babel.transfrom("code", {plugins: ["transform-decorators"]})

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97334.html

相關(guān)文章

  • 【工具向】我所知道的babel總結(jié)

    摘要：這兩天研究了一下這個(gè)工具，因?yàn)槠綍r(shí)項(xiàng)目基本都是腳手架生成的配置文件，真正自己想寫點(diǎn)東西的時(shí)候，親自去配卻是一臉懵逼，寫下這篇博客記錄一下我的認(rèn)知范圍內(nèi)的總結(jié)。 這兩天研究了一下babel這個(gè)工具，因?yàn)槠綍r(shí)項(xiàng)目基本都是腳手架生成的babel配置文件，真正自己想寫點(diǎn)東西的時(shí)候，親自去配卻是一臉懵逼，寫下這篇博客記錄一下我的認(rèn)知范圍內(nèi)的babel總結(jié)。首先，先看幾個(gè)平時(shí)常見的babel配置s...

    Leo_chen 評(píng)論0 收藏0

  • Babel的使用

    摘要：使用的時(shí)候只需要安裝你想要的階段就可以了然后添加進(jìn)你的配置文件。為了顯出的能耐，我們分別配個(gè)用和支持的先來配使用的首先安裝然后配置需要注意的是，雖然沒有出現(xiàn)在配置里，但仍然需要安裝，因?yàn)橐蕾囁? Babel介紹 Babel 把用最新標(biāo)準(zhǔn)編寫的 JavaScript 代碼向下編譯成可以在今天隨處可用的版本。 這一過程叫做源碼到源碼編譯， 也被稱為轉(zhuǎn)換編譯。 15 年 11 月，Babel...

    Y3G 評(píng)論0 收藏0

  • Babel快速入門

    摘要：首先，作為入門的話，的用戶手冊(cè)是個(gè)很不錯(cuò)的選擇，里面基本覆蓋了使用的各方面。所以下面主要是我學(xué)習(xí)的一些筆記，姑且當(dāng)作是一篇入門吧。下面我們正式進(jìn)入正題。這也是最常用的一個(gè)用法之一。有兩個(gè)方式進(jìn)行配置。 首先，作為入門的話，Babel的用戶手冊(cè)是個(gè)很不錯(cuò)的選擇，里面基本覆蓋了Babel使用的各方面。所以下面主要是我學(xué)習(xí)Babel的一些筆記，姑且當(dāng)作是一篇入門吧。 Babel是什么 按照B...

    notebin 評(píng)論0 收藏0

  • ES2015入門系列9-Babel和Rollup

    摘要：雖然夠好用，奈何沒有瀏覽器對(duì)其可以完全支持，本文書寫時(shí)間，開發(fā)版號(hào)稱已經(jīng)支持的特性。開始安裝本系列假定讀者都有使用經(jīng)驗(yàn)，如果還沒有，趕緊去這里了解并安裝吧。到此，我們的已經(jīng)準(zhǔn)備就緒。 通過前面章節(jié)的講解，大家對(duì)ES2015的一些新語法有了初步的理解，之前我們的測(cè)試代碼都可以直接放入 Chrome Console 中直接運(yùn)行，為了更好的學(xué)習(xí)后面的面向?qū)ο蠛湍K開發(fā)，我先用一章介紹一下 B...

    eccozhou 評(píng)論0 收藏0

  • webpack實(shí)戰(zhàn)

    摘要：和類似的預(yù)處理器還有等。的用處非常多，包括給自動(dòng)加前綴使用下一代語法等，目前越來越多的人開始用它，它很可能會(huì)成為預(yù)處理器的最終贏家。 webpack實(shí)戰(zhàn) 查看所有文檔頁(yè)面：全棧開發(fā)，獲取更多信息?？祚R加鞭，加班加點(diǎn)，終于把這個(gè)文檔整理出來了，順便深入地學(xué)習(xí)一番，鞏固知識(shí)，就是太累人，影響睡眠時(shí)間和質(zhì)量。極客就是想要把事情做到極致，開始了就必須到達(dá)終點(diǎn)。 原文鏈接：webpack實(shí)戰(zhàn)，原...

    cyrils 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<