• 可以在我的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"] });

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

總結

以上是生活随笔為你收集整理的Babel 7 基础入门学习（详细版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。