Babel 7 基礎入門學習（詳細版）

• 可以在我的GitHub上下載示例代碼。

前言 

之前一直想要系統的學習一下Babel的使用規則，看過阮一峯老師的《Babel基礎入門》，無奈此教程是2016年出的，而Babel 7都已經出來啦，於是，在蒐集了各種資料後，關於如何快速上手Babel，我大概精簡了以下步驟，如有錯誤，希望大家能指出來，謝謝！

使用指南

1.使用手冊——Babel官網（最好看着官網提示的步驟一點一點來）

2.配置環境——創建項目文件babel-demo，進入項目後 git bash，然後輸入 npm init -y，然後項目文件就會出現配置文件：package.json

       

3.下載相應的包

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

或者簡寫：

npm install -D @babel/core @babel/cli @babel/preset-env
npm install @babel/polyfill

（--save-dev(簡寫-D）表示該版本只適用於開發環境中，命令會自動幫你寫在package.json的devDependencies中 

 --save（或者不寫）則表示該版本適用於生產環境中，命令會自動幫你寫在package.json的dependencies中 ）

註釋：先解釋一下使用Babel前要下載的包的意義和用法

如下。

1).   @babel/cli是一個允許你從終端使用 babel 的工具。即用於命令行轉碼

基本用法如下。

# 轉碼結果輸出到標準輸出
$ babel example.js

# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 參數生成source map文件
$ babel src -d lib -s

2).   Babel 的核心功能在 @babel/core模塊，如果某些代碼需要調用Babel的API進行轉碼，則就需要此模塊。

用法如下 

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 }

 例子如下。

在src目錄文件新建一個core.js文件，輸入如下

var es6Code = 'let x = n => n + 1';
var envCode = require('@babel/core')
  .transform(es6Code, {
    presets: ["@babel/env"]
  })
  .code;
  console.log(envCode);

 之後在bash中輸入 

$ npx babel src -d dist
//npx如果不懂請自行上網搜尋

編譯成功，你會在目錄裏看到dist，裏面有已經編譯好的core.js文件，如下

"use strict";

var es6Code = 'let x = n => n + 1';

var envCode = require('@babel/core').transform(es6Code, {
  presets: ["@babel/env"]
}).code;

console.log(envCode);

如果想看envCode的結果，也可以在bash中輸入

$ node src/core.js

 

3).   @babel/polyfill 模塊包括core-js和自定義regenerator runtime 來模擬完整的 ES2015+ 環境。

Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。

舉例來說，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill，爲當前環境提供一個墊片。

4).    @babel/preset-env 根據你需要支持的環境（配合targets中的瀏覽器信息）自動決定適合你的 Babel 插件

4.使用以下內容在項目的根目錄中創建名爲 babel.config.js 的配置文件：(配置文件很重要）

module.exports = function(api){
    api.cache(true)
    const presets = [
        ["@babel/env", {
          targets: {
            ie:"10",
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1"
          },
          useBuiltIns: "usage"
        }]
      ];
      const plugins = [];
      return {
        presets,
        plugins
      }
}

//target表示你想要支持的瀏覽器的最低型號
// useBuiltIns: "usage" ——由於polyfill包很臃腫，Babel 的此設置將檢查你的所有代碼，以查找目標環境中缺少的功能，並僅包含所需的 polyfill。

 5.開始使用！！  創建src文件夾，再在裏面創建index.js文件，並輸入

(x => x * 2)(1)

 並在bash裏繼續輸出入

 $ npx babel src -d dist
//npx如果不懂請自行上網搜尋

如果覺得每次都要輸入 npx babel src -d dist  太長，也可以 改寫package.json文件，

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:auto":"npx babel src -d dist"
  },

之後只需要在bash中輸入

$ npm run build:auto

 

 結果如下，順利編譯成功了

"use strict";

(function (x) {
  return x * 2;
})(1);

6.配置的其他方法

以上方法是用了babel.config.js來配置Babel

即

babel.config.js

babel.config.js在項目的根目錄中創建一個使用以下內容調用的文件。

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

查看babel.config.js文檔以查看更多配置選項。

官網還有幾種方法來配置

I. .babelrc

{
  "presets": [...],
  "plugins": [...]
}

.babelrc在項目中創建一個使用以下內容調用的文件。

II.    package.json     

或者，您可以選擇使用密鑰.babelrc從內部指定配置，如下所示：package.json babel

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

 

III.  .babelrc.js

配置.babelrc與之相同，但您可以使用JavaScript編寫它。

const presets = [ ... ];
const plugins = [ ... ];

module.exports = { presets, plugins };

你可以訪問任何Node.js API，例如基於流程環境的動態配置 ：

const presets = [ ... ];
const plugins = [ ... ];

if (process.env["ENV"] === "prod") {
  plugins.push(...);
}

module.exports = { presets, plugins };

IV.    使用CLI（@babel/cli）

這裏如果你明確知道自己需要的插件，如箭頭函數，那麼可以在bash先下載

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

然後接着輸入

babel --plugins @babel/plugin-transform-arrow-functions src -d dist

即可

V.   使用API​​（@babel/core）

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-transform-arrow-functions"]
});

 好的，大概就是這樣啦，如果有任何問題可以在評論區指出，謝謝大家！