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

JeOam 發布于2019-08-23 11:42 / 1853人閱讀

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

寫在前面：Node 環境是默認支持 ECMAScript6 的，但我們需要使用 babel 來滿足我們使用新特性的需求。

以下內容為了不讓項目產生環境依賴，沒有使用全局安裝的方式。你可以新建一個文件夾，在其內部執行。

瀏覽器環境

babel 6 開始不再支持瀏覽器環境, 如果你使用的是 babel 6+ , 那么你需要以構建工具, 這里僅使用 babel 5

終端運行一下命令安裝 babel:

npm install babel-core@5

mac中, 將以下路徑js文件引入 html 中：

node-modules/babel-core/browser.js




  
  Babel in Browser

node環境

node 環境本身是支持 ES6 的, 不過它提供了把 ES6 的代碼轉換為 ES5 的方法：
在項目目錄中執行：

# ES2015轉碼規則
npm install --save-dev babel-preset-2015

# react轉碼規則
$ npm install --save-dev babel-preset-react

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

然后在項目根目錄下創建.babelrc 文件:

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

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

還可以用一個鉤子關聯.ES6 .es .jsx .js文件

npm install --save-dev babel-register

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

require("babel-register");

當然以上方法不會對 ES6 特有的類、對象、方法進行轉換, 如果需要應安裝 babel-polyfill 模塊：

npm install babel-polyfill --save

并在所有腳步頭部加入：

require("babel-polyfill");
//or
import "babel-polyfill";

命令行環境

在項目目錄中執行：

npm install --save-dev babel-cli

之后繼續執行以下代碼就進入 ES6 的 REPL 環境, 可以直接運行 ES6 代碼：

babel-node

如果執行 js 文件, 可以：

babel-node ES6Node.js

還有一下命令把 ES6 代碼轉換為 ES5 代碼：

# 轉換為 ES5 并輸出代碼
babel ES6.js

# 轉換 ES6.js 并輸出到指定文件
babel ES6.js -o ES5.js

# 轉換整個文件夾中的 ES6 代碼文件到 ES5
babel -d build-dir source-dir

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

此外還有 babel 的在線轉碼器：https://babeljs.io/repl

JS 文件內

之前已經安裝了 babel-core 就可以在 JS 文件內使用 babel:

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

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

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

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

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

之后可以直接用以下代碼轉碼:

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;
};`

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

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

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

然后配置 .babelrc 文件:

{
  plugins: ["transform-decorators"]
}

此時就可以用 babel 對 Decorator 轉碼了。
腳本中打開的命令如下：

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

云服務器 GPU云服務器 javascript 語法 javascript語法 javascript語法檢測 javascript語法基礎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97334.html

【工具向】我所知道的babel總結

摘要：這兩天研究了一下這個工具，因為平時項目基本都是腳手架生成的配置文件，真正自己想寫點東西的時候，親自去配卻是一臉懵逼，寫下這篇博客記錄一下我的認知范圍內的總結。這兩天研究了一下babel這個工具，因為平時項目基本都是腳手架生成的babel配置文件，真正自己想寫點東西的時候，親自去配卻是一臉懵逼，寫下這篇博客記錄一下我的認知范圍內的babel總結。首先，先看幾個平時常見的babel配置s...

Leo_chen 2019-08-22 16:32 評論0 收藏0
Babel的使用

摘要：使用的時候只需要安裝你想要的階段就可以了然后添加進你的配置文件。為了顯出的能耐，我們分別配個用和支持的先來配使用的首先安裝然后配置需要注意的是，雖然沒有出現在配置里，但仍然需要安裝，因為依賴它。 Babel介紹 Babel 把用最新標準編寫的 JavaScript 代碼向下編譯成可以在今天隨處可用的版本。這一過程叫做源碼到源碼編譯，也被稱為轉換編譯。 15 年 11 月，Babel...

Y3G 2019-08-20 13:51 評論0 收藏0
Babel快速入門

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

notebin 2019-08-21 10:57 評論0 收藏0
ES2015入門系列9-Babel和Rollup

摘要：雖然夠好用，奈何沒有瀏覽器對其可以完全支持，本文書寫時間，開發版號稱已經支持的特性。開始安裝本系列假定讀者都有使用經驗，如果還沒有，趕緊去這里了解并安裝吧。到此，我們的已經準備就緒。通過前面章節的講解，大家對ES2015的一些新語法有了初步的理解，之前我們的測試代碼都可以直接放入 Chrome Console 中直接運行，為了更好的學習后面的面向對象和模塊開發，我先用一章介紹一下 B...

eccozhou 2019-08-20 17:40 評論0 收藏0
webpack實戰

摘要：和類似的預處理器還有等。的用處非常多，包括給自動加前綴使用下一代語法等，目前越來越多的人開始用它，它很可能會成為預處理器的最終贏家。 webpack實戰查看所有文檔頁面：全棧開發，獲取更多信息。快馬加鞭，加班加點，終于把這個文檔整理出來了，順便深入地學習一番，鞏固知識，就是太累人，影響睡眠時間和質量。極客就是想要把事情做到極致，開始了就必須到達終點。原文鏈接：webpack實戰，原...

cyrils 2019-08-22 17:32 評論0 收藏0