巴別塔簡短簡要指南

Babel是Web Developer工具集中的出色條目。這是一個了不起的工具,已經存在了一段時間,但是如今幾乎每個JavaScript開發人員都依賴它,並且這種情況將繼續下去,因為Babel現在不可或缺,並且已經解決了每個人的大難題。

本文介紹了Babel 7(當前穩定的發行版)

通天塔簡介

Babel是一個了不起的工具,已經存在了一段時間,但如今幾乎JavaScript開發人員依靠它,並且這種情況將繼續下去,因為Babel現在不可或缺,並且已經解決了每個人的大難題。

哪個問題?

每個Web開發人員肯定都會遇到的問題:JavaScript的功能在最新版本的瀏覽器中可用,但在較早的版本中不可用。也許Chrome或Firefox可以實現它,但Safari iOS和Edge卻不能。

例如,ES6引入了箭頭功能

[1, 2, 3].map((n) => n + 1)

現在所有現代瀏覽器都支持該功能。 IE11不支持它,Opera Mini也不支持(我怎麼知道?通過檢查ES6兼容性表)。

那麼您應該如何處理這個問題呢?您應該繼續前進,讓那些使用較舊/不兼容瀏覽器的客戶留下來,還是應該編寫較舊的JavaScript代碼使所有用戶滿意?

輸入Babel。通天塔是編譯器:接受采用一種標準編寫的代碼,並將其轉換為採用另一種標準編寫的代碼。

您可以配置Babel將現代ES2017 JavaScript轉換為JavaScript ES5語法:

[1, 2, 3].map(function(n) {
  return n + 1
})

這必須在構建時發生,因此您必須設置一個可以為您處理的工作流。Webpack是一個常見的解決方案。

(PS,如果這一切ES聽起來讓您感到困惑,請參閱有關ES版本的更多信息在ECMAScript指南中

安裝Babel

Babel易於安裝,使用npm,位於項目的本地:

npm install --save-dev @babel/core @babel/cli

過去我建議安裝babel-cli在全球範圍內,但是Babel維護人員現在不建議這樣做,因為在本地使用它可以在每個項目中使用不同版本的Babel,並且在存儲庫中檢入babel更適合團隊工作

由於npm現在帶有npx,可以通過在項目文件夾中鍵入以下命令來運行本地安裝的CLI軟件包:

這樣我們就可以通過運行Babel來運行

npx babel script.js

Babel配置示例

Babel開箱即用並沒有做任何有用的事情,您需要對其進行配置並添加插件。

這是Babel插件的列表

為了解決我們在簡介中討論的問題(在每個瀏覽器中使用箭頭功能),我們可以運行

npm install --save-dev \
    @babel/plugin-transform-arrow-functions

將軟件包下載到node_modules應用程序的文件夾,那麼我們需要添加

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

.babelrc文件存在於應用程序根文件夾中。如果您還沒有該文件,則只需創建一個空白文件,然後將其內容放入其中即可。

提示:如果您從未見過點文件(以點開頭的文件),乍一看可能很奇怪,因為該文件可能不會出現在文件管理器中,因為它是隱藏文件。

現在,如果我們有一個script.js包含以下內容的文件:

var a = () => {};
var a = (b) => b;

const double = [1,2,3].map((num) => num * 2); console.log(double); // [2,4,6] var bob = { _name: “Bob”, _friends: [“Sally”, “Tom”], printFriends() { this._friends.forEach(f => console.log(this._name + " knows " + f)); } }; console.log(bob.printFriends());

跑步babel script.js將輸出以下代碼:

var a = function () {};var a = function (b) {
  return b;
};

const double = [1, 2, 3].map(function (num) { return num * 2; });console.log(double); // [2,4,6] var bob = { _name: “Bob”, _friends: [“Sally”, “Tom”], printFriends() { var _this = this;

<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_friends</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">f</span>) {
  <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">_this</span>.<span style="color:#a6e22e">_name</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">" knows "</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">f</span>);
});

} }; console.log(bob.printFriends());

如您所見,箭頭函數已全部轉換為JavaScript ES5函數。

Babel預設

我們剛剛在上一篇文章中看到瞭如何配置Babel來轉換特定的JavaScript功能。

您可以添加更多的插件,但是不能一一添加到配置功能中,這是不實際的。

這就是Babel提供的原因預設

最受歡迎的預設是envreact

提示:Babel 7已棄用(並刪除了)年度預設,例如preset-es2017以及舞台預設。使用@babel/preset-env反而。

env預設

env預設非常好:您告訴它要支持的環境,它可以為您完成所有工作,支持所有現代JavaScript功能

例如,“支持每個瀏覽器的最後2個版本,但對於Safari,我們支持Safari 7之後的所有版本。

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

或“我不需要瀏覽器支持,只需讓我一起使用Node.js6.10”

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

react預設

react編寫React應用程序時,預設非常方便:添加preset-flowsyntax-jsxtransform-react-jsxtransform-react-display-name

通過包含它,您已經準備好使用JSX轉換和Flow支持來開發React應用程序。

有關預設的更多信息

https://babeljs.io/docs/plugins/

將Babel與Webpack一起使用

如果您想在瀏覽器中運行現代JavaScript,單憑Babel是不夠的,您還需要捆綁代碼。 Webpack是實現此目的的完美工具。

提示:請閱讀Webpack指南如果您不熟悉webpack

現代JS需要兩個不同的階段:編譯階段和運行時階段。這是因為某些ES6 +功能需要polyfill或運行時幫助程序。

要安裝Babel polyfill運行時功能,請運行

npm install @babel/polyfill \
            @babel/runtime \
            @babel/plugin-transform-runtime

現在在你的webpack.config.js文件添加:

entry: [
  'babel-polyfill',
  // your app scripts should be here
],

module: { loaders: [ // Babel loader compiles ES2015 into ES5 for // complete cross-browser support { loader: ‘babel-loader’, test: /.js$/, // only include files present in the src subdirectory include: [path.resolve(__dirname, “src”)], // exclude node_modules, equivalent to the above line exclude: /node_modules/, query: { // Use the default ES2015 preset // to include all ES2015 features presets: [‘es2015’], plugins: [‘transform-runtime’] } } ] }

通過將預設和插件信息保留在webpack.config.js文件,我們可以避免.babelrc文件。


更多devtools教程: