babel官網(wǎng) babel
介紹
Babel 是一個(gè)通用的多用途 JavaScript 編譯器。通過 Babel 你可以使用(并創(chuàng)建)下一代的 JavaScript,以及下一代的 JavaScript 工具。
作為一種語言,JavaScript 在不斷發(fā)展,新的標(biāo)準(zhǔn)/提案和新的特性層出不窮。 在得到廣泛普及之前,Babel 能夠讓你提前(甚至數(shù)年)使用它們。
Babel 把用最新標(biāo)準(zhǔn)編寫的 JavaScript 代碼向下編譯成可以在今天隨處可用的版本。 這一過程叫做“源碼到源碼”編譯, 也被稱為轉(zhuǎn)換編譯(transpiling,是一個(gè)自造合成詞,即轉(zhuǎn)換+編譯。以下也簡稱為轉(zhuǎn)譯)。
例如,Babel 能夠?qū)⑿碌?ES2015 箭頭函數(shù)語法:
const square = n => n * n;
轉(zhuǎn)譯為:
const square = function square(n) {
return n * n;
};
不過 Babel 的用途并不止于此,它支持語法擴(kuò)展,能支持像 React 所用的 JSX 語法,同時(shí)還支持用于靜態(tài)類型檢查的流式語法(Flow Syntax)。
更重要的是,Babel 的一切都是簡單的插件,誰都可以創(chuàng)建自己的插件,利用 Babel 的全部威力去做任何事情。
再進(jìn)一步,Babel 自身被分解成了數(shù)個(gè)核心模塊,任何人都可以利用它們來創(chuàng)建下一代的 JavaScript 工具。
已經(jīng)有很多人都這樣做了,圍繞著 Babel 涌現(xiàn)出了非常大規(guī)模和多樣化的生態(tài)系統(tǒng)。 在這本手冊(cè)中,我將介紹如何使用 Babel 的內(nèi)建工具以及一些來自于社區(qū)的非常有用的東西。
安裝 Babel
由于 JavaScript 社區(qū)沒有統(tǒng)一的構(gòu)建工具、框架、平臺(tái)等等,因此 Babel 正式集成了對(duì)所有主流工具的支持。 從 Gulp 到 Browserify,從 Ember 到 Meteor,不管你的環(huán)境設(shè)置如何,Babel 都有正式的集成支持。
本手冊(cè)的目的主要是介紹 Babel 內(nèi)建方式的安裝,不過你可以訪問交互式的安裝頁面來查看其它的整合方式。
注意:
本手冊(cè)將涉及到一些命令行工具如node
和npm
。在繼續(xù)閱讀之前請(qǐng)確保你已經(jīng)熟悉這些工具了。
babel-cli
Babel 的 CLI 是一種在命令行下使用 Babel 編譯文件的簡單方法。
讓我們先全局安裝它來學(xué)習(xí)基礎(chǔ)知識(shí)。
$ npm install --global babel-cli
我們可以這樣來編譯我們的第一個(gè)文件:
$ babel my-file.js
這將把編譯后的結(jié)果直接輸出至終端。使用 --out-file
或著 -o
可以將結(jié)果寫入到指定的文件。
$ babel example.js --out-file compiled.js
# 或
$ babel example.js -o compiled.js
如果我們想要把一個(gè)目錄整個(gè)編譯成一個(gè)新的目錄,可以使用 --out-dir
或者 -d
。
$ babel src --out-dir lib
# 或
$ babel src -d lib
在項(xiàng)目內(nèi)運(yùn)行 Babel CLI
盡管你可以把 Babel CLI 全局安裝在你的機(jī)器上,但是按項(xiàng)目逐個(gè)安裝在本地會(huì)更好。
有兩個(gè)主要的原因。
- 在同一臺(tái)機(jī)器上的不同項(xiàng)目或許會(huì)依賴不同版本的 Babel 并允許你有選擇的更新。
- 這意味著你對(duì)工作環(huán)境沒有隱式依賴,這讓你的項(xiàng)目有很好的可移植性并且易于安裝。
要在(項(xiàng)目)本地安裝 Babel CLI 可以運(yùn)行:
$ npm install --save-dev babel-cli
注意:
因?yàn)槿诌\(yùn)行 Babel 通常不是什么好習(xí)慣所以如果你想要卸載全局安裝的 Babel 的話,可以運(yùn)行:
$ npm uninstall --global babel-cli
安裝完成后,你的 package.json
應(yīng)該如下所示:
{
"name": "my-project",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.0.0"
}
}
現(xiàn)在,我們不直接從命令行運(yùn)行 Babel 了,取而代之我們將把運(yùn)行命令寫在 npm scripts 里,這樣可以使用 Babel 的本地版本。
只需將 "scripts"
字段添加到你的 package.json
文件內(nèi)并且把 babel 命令寫成 build
字段。
{
"name": "my-project",
"version": "1.0.0",
+ "scripts": {
+ "build": "babel src -d lib"
+ },
"devDependencies": {
"babel-cli": "^6.0.0"
}
}
現(xiàn)在可以在終端里運(yùn)行:
npm run build
這將以與之前同樣的方式運(yùn)行 Babel,但這一次我們使用的是本地副本。
babel-register
下一個(gè)常用的運(yùn)行 Babel 的方法是通過 babel-register
。這種方法只需要引入文件就可以運(yùn)行 Babel,或許能更好地融入你的項(xiàng)目設(shè)置。
但請(qǐng)注意這種方法并不適合正式產(chǎn)品環(huán)境使用。 直接部署用此方式編譯的代碼不是好的做法。 在部署之前預(yù)先編譯會(huì)更好。 不過用在構(gòu)建腳本或是其他本地運(yùn)行的腳本中是非常合適的。
讓我們先在項(xiàng)目中創(chuàng)建 index.js
文件。
console.log("Hello world!");
如果我們用 node index.js
來運(yùn)行它是不會(huì)使用 Babel 來編譯的。所以我們需要設(shè)置 babel-register
。.
首先安裝 babel-register
。.
$ npm install --save-dev babel-register
接著,在項(xiàng)目中創(chuàng)建 register.js
文件并添加如下代碼:
require("babel-register");
require("./index.js");
這樣做可以把 Babel 注冊(cè)到 Node 的模塊系統(tǒng)中并開始編譯其中 require
的所有文件。
現(xiàn)在我們可以使用 register.js
來代替 node index.js
來運(yùn)行了。
$ node register.js
注意:
你不能在你要編譯的文件內(nèi)同時(shí)注冊(cè) Babel,因?yàn)?node 會(huì)在 Babel 編譯它之前就將它執(zhí)行了。
require("babel-register");
// 未編譯的:
console.log("Hello world!");
babel-node
如果你要用 node
CLI 來運(yùn)行代碼,那么整合 Babel 最簡單的方式就是使用 babel-node
CLI,它是 node
CLI 的替代品。
但請(qǐng)注意這種方法并不適合正式產(chǎn)品環(huán)境使用。 直接部署用此方式編譯的代碼不是好的做法。 在部署之前預(yù)先編譯會(huì)更好。 不過用在構(gòu)建腳本或是其他本地運(yùn)行的腳本中是非常合適的。
首先確保 babel-cli
已經(jīng)安裝了。
$ npm install --save-dev babel-cli
注意:
如果您想知道我們?yōu)槭裁匆诒镜匕惭b,請(qǐng)閱讀 上面在項(xiàng)目內(nèi)運(yùn)行Babel CLI的部分。
然后用 babel-node
來替代 node
運(yùn)行所有的代碼 。.
如果用 npm scripts
的話只需要這樣做:
{
"scripts": {
- "script-name": "node script.js"
+ "script-name": "babel-node script.js"
}
}
要不然的話你需要寫全 babel-node
的路徑。
- node script.js
+ ./node_modules/.bin/babel-node script.js
提示:
你可以使用npm-run
babel-core
如果你需要以編程的方式來使用 Babel,可以使用 babel-core
這個(gè)包。
首先安裝 babel-core
。.
$ npm install babel-core
var babel = require("babel-core");
字符串形式的 JavaScript 代碼可以直接使用 babel.transform
來編譯。.
babel.transform("code();", options);
// => { code, map, ast }
如果是文件的話,可以使用異步 api:
babel.transformFile("filename.js", options, function(err, result) {
result; // => { code, map, ast }
});
或者是同步 api:
babel.transformFileSync("filename.js", options);
// => { code, map, ast }
要是已經(jīng)有一個(gè) Babel AST(抽象語法樹)了就可以直接從 AST 進(jìn)行轉(zhuǎn)換。
babel.transformFromAst(ast, code, options);
// => { code, map, ast }
對(duì)于上述所有方法,options
指的都是 http://babeljs.io/docs/usage/options/
配置 Babel
你或許已經(jīng)注意到了,目前為止通過運(yùn)行 Babel 自己我們并沒能“翻譯”代碼,而僅僅是把代碼從一處拷貝到了另一處。
這是因?yàn)槲覀冞€沒告訴 Babel 要做什么。
由于 Babel 是一個(gè)可以用各種花樣去使用的通用編譯器,因此默認(rèn)情況下它反而什么都不做。你必須明確地告訴 Babel 應(yīng)該要做什么。
你可以通過安裝 插件(plugins) 或 預(yù)設(shè)(presets,也就是一組插件) 來指示 Babel 去做什么事情。
.babelrc
在我們告訴 Babel 該做什么之前,我們需要?jiǎng)?chuàng)建一個(gè)配置文件。你需要做的就是在項(xiàng)目的根路徑下創(chuàng)建 .babelrc
文件。然后輸入以下內(nèi)容作為開始:
{
"presets": [],
"plugins": []
}
這個(gè)文件就是用來讓 Babel 做你要它做的事情的配置文件。
::: warning 注意
盡管你也可以用其他方式給 Babel 傳遞選項(xiàng),但 .babelrc
文件是約定也是最好的方式。
:::
babel-preset-es2015
我們先從讓 Babel 把 ES2015(最新版本的 JavaScript 標(biāo)準(zhǔn),也叫做 ES6)編譯成 ES5(現(xiàn)今在大多數(shù) JavaScript 環(huán)境下可用的版本)開始吧。
我們需要安裝 "es2015" Babel 預(yù)設(shè):
$ npm install --save-dev babel-preset-es2015
我們修改 .babelrc
來包含這個(gè)預(yù)設(shè)。
{
"presets": [
+ "es2015"
],
"plugins": []
}
babel-preset-react
設(shè)置 React 一樣容易。只需要安裝這個(gè)預(yù)設(shè):
$ npm install --save-dev babel-preset-react
然后在 .babelrc
文件里補(bǔ)充:
{
"presets": [
"es2015",
+ "react"
],
"plugins": []
}
babel-preset-stage-x
JavaScript 還有一些提案,正在積極通過 TC39(ECMAScript 標(biāo)準(zhǔn)背后的技術(shù)委員會(huì))的流程成為標(biāo)準(zhǔn)的一部分。
這個(gè)流程分為 5(0-4)個(gè)階段。 隨著提案得到越多的關(guān)注就越有可能被標(biāo)準(zhǔn)采納,于是他們就繼續(xù)通過各個(gè)階段,最終在階段 4 被標(biāo)準(zhǔn)正式采納。
以下是4 個(gè)不同階段的(打包的)預(yù)設(shè):
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
注意:
stage-4 預(yù)設(shè)是不存在的因?yàn)樗褪巧厦娴?es2015
預(yù)設(shè)。
以上每種預(yù)設(shè)都依賴于緊隨的后期階段預(yù)設(shè)。例如,babel-preset-stage-1
依賴 babel-preset-stage-2
,后者又依賴 babel-preset-stage-3
。
使用的時(shí)候只需要安裝你想要的階段就可以了:
$ npm install --save-dev babel-preset-stage-2
然后添加進(jìn)你的 .babelrc
配置文件。
{
"presets": [
"es2015",
"react",
+ "stage-2"
],
"plugins": []
}
執(zhí)行 Babel 生成的代碼
即便你已經(jīng)用 Babel 編譯了你的代碼,但這還不算完。
babel-polyfill
Babel 幾乎可以編譯所有時(shí)新的 JavaScript 語法,但對(duì)于 APIs 來說卻并非如此。
比方說,下列含有箭頭函數(shù)的需要編譯的代碼:
function addAll() {
return Array.from(arguments).reduce((a, b) => a + b);
}
最終會(huì)變成這樣:
function addAll() {
return Array.from(arguments).reduce(function(a, b) {
return a + b;
});
}
然而,它依然無法隨處可用因?yàn)椴皇撬械?JavaScript 環(huán)境都支持 Array.from
。
Uncaught TypeError: Array.from is not a function
為了解決這個(gè)問題,我們使用一種叫做 Polyfill(代碼填充,也可譯作兼容性補(bǔ)丁) 的技術(shù)。 簡單地說,polyfill 即是在當(dāng)前運(yùn)行環(huán)境中用來復(fù)制(意指模擬性的復(fù)制,而不是拷貝)尚不存在的原生 api 的代碼。 能讓你提前使用還不可用的 APIs,Array.from
就是一個(gè)例子。
Babel 用了優(yōu)秀的 core-js 用作 polyfill,并且還有定制化的 regenerator 來讓 generators(生成器)和 async functions(異步函數(shù))正常工作。
要使用 Babel polyfill,首先用 npm 安裝它:
$ npm install --save babel-polyfill
然后只需要在文件頂部導(dǎo)入 polyfill 就可以了:
import "babel-polyfill";
babel-runtime
為了實(shí)現(xiàn) ECMAScript 規(guī)范的細(xì)節(jié),Babel 會(huì)使用“助手”方法來保持生成代碼的整潔。
由于這些助手方法可能會(huì)特別長并且會(huì)被添加到每一個(gè)文件的頂部,因此你可以把它們統(tǒng)一移動(dòng)到一個(gè)單一的“運(yùn)行時(shí)(runtime)”中去。
通過安裝 babel-plugin-transform-runtime
和 babel-runtime
來開始。
$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime
然后更新 .babelrc
:
{
"plugins": [
+ "transform-runtime",
"transform-es2015-classes"
]
}
現(xiàn)在,Babel 會(huì)把這樣的代碼:
class Foo {
method() {}
}
編譯成:
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
let Foo = function () {
function Foo() {
_classCallCheck(this, Foo);
}
_createClass(Foo, [{
key: "method",
value: function method() {}
}]);
return Foo;
}();
這樣就不需要把 _classCallCheck
和 _createClass
這兩個(gè)助手方法放進(jìn)每一個(gè)需要的文件里去了。
配置 Babel(進(jìn)階)
大多數(shù)人使用 Babel 的內(nèi)建預(yù)設(shè)就足夠了,不過 Babel 提供了更多更細(xì)粒度的能力。
手動(dòng)指定插件
Babel 預(yù)設(shè)就是一些預(yù)先配置好的插件的集合,如果你想要做一些不一樣的事情你會(huì)手動(dòng)去設(shè)定插件,這和使用預(yù)設(shè)幾乎完全相同。
首先安裝插件:
$ npm install --save-dev babel-plugin-transform-es2015-classes
然后往 .babelrc
文件添加 plugins
字段。.
{
+ "plugins": [
+ "transform-es2015-classes"
+ ]
}
這能讓你對(duì)正在使用的轉(zhuǎn)換器進(jìn)行更細(xì)致的控制。
完整的官方插件列表請(qǐng)見 Babel 插件頁面
同時(shí)也別忘了看看由社區(qū)構(gòu)建的其他插件。 如果你想學(xué)習(xí)如何編寫自己的插件可以閱讀 Babel 插件手冊(cè)。
插件選項(xiàng)
很多插件也有選項(xiàng)用于配置他們自身的行為。 例如,很多轉(zhuǎn)換器都有“寬松”模式,通過放棄一些標(biāo)準(zhǔn)中的行為來生成更簡化且性能更好的代碼。
要為插件添加選項(xiàng),只需要做出以下更改:
{
"plugins": [
- "transform-es2015-classes"
+ ["transform-es2015-classes", { "loose": true }]
]
}
基于環(huán)境自定義 Babel
Babel 插件解決許多不同的問題。 其中大多數(shù)是開發(fā)工具,可以幫助你調(diào)試代碼或是與工具集成。 也有大量的插件用于在生產(chǎn)環(huán)境中優(yōu)化你的代碼。
因此,想要基于環(huán)境來配置 Babel 是很常見的。你可以輕松的使用 .babelrc
文件來達(dá)成目的。
{
"presets": ["es2015"],
"plugins": [],
+ "env": {
+ "development": {
+ "plugins": [...]
+ },
+ "production": {
+ "plugins": [...]
+ }
}
}
Babel 將根據(jù)當(dāng)前環(huán)境來開啟 env
下的配置。
當(dāng)前環(huán)境可以使用 process.env.BABEL_ENV
來獲得。 如果 BABEL_ENV
不可用,將會(huì)替換成 NODE_ENV
,并且如果后者也沒有設(shè)置,那么缺省值是"development"
。
Unix
$ BABEL_ENV=production [COMMAND]
$ NODE_ENV=production [COMMAND]
Windows
$ SET BABEL_ENV=production
$ [COMMAND]
注意:
[COMMAND]
指的是任意一個(gè)用來運(yùn)行 Babel 的命令(如:babel
,babel-node
,或是node
,如果你使用了 register 鉤子的話)。
提示
如果你想要讓命令能夠跨 unix 和 windows 平臺(tái)運(yùn)行的話,可以使用cross-env
制作你自己的預(yù)設(shè)(preset)
手動(dòng)指定插件?插件選項(xiàng)?環(huán)境特定設(shè)置?所有這些配置都會(huì)在你的項(xiàng)目里產(chǎn)生大量的重復(fù)工作。
為此,我們鼓勵(lì)社區(qū)創(chuàng)建自己的預(yù)設(shè)。 這可能是一個(gè)針對(duì)特定 node 版本的預(yù)設(shè),或是適用于你整個(gè)公司的預(yù)設(shè)。
創(chuàng)建預(yù)設(shè)非常容易。比方說你這樣一個(gè) .babelrc
文件:
{
"presets": [
"es2015",
"react"
],
"plugins": [
"transform-flow-strip-types"
]
}
你要做的就是依循命名約定 babel-preset-*
來創(chuàng)建一個(gè)新項(xiàng)目(請(qǐng)務(wù)必對(duì)這個(gè)命名約定保持責(zé)任心,也就是說不要濫用這個(gè)命名空間),然后創(chuàng)建兩個(gè)文件。
首先,創(chuàng)建一個(gè) package.json
,包括針對(duì)預(yù)設(shè)所必要的 dependencies
。
{
"name": "babel-preset-my-awesome-preset",
"version": "1.0.0",
"author": "James Kyle <me@thejameskyle.com>",
"dependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-plugin-transform-flow-strip-types": "^6.3.15"
}
}
然后創(chuàng)建 index.js
文件用于導(dǎo)出 .babelrc
的內(nèi)容,使用對(duì)應(yīng)的 require
調(diào)用來替換 plugins/presets 字符串。
module.exports = {
presets: [
require("babel-preset-es2015"),
require("babel-preset-react")
],
plugins: [
require("babel-plugin-transform-flow-strip-types")
]
};
然后只需要發(fā)布到 npm 于是你就可以像其它預(yù)設(shè)一樣來使用你的預(yù)設(shè)了。
Babel 和其他工具
一旦你掌握的竅門,安裝 Babel 還是十分簡明的,不過和其他工具搭配在一起就會(huì)變得困難多了。 不過我們一直在與其他項(xiàng)目密切合作以確保這種體驗(yàn)盡可能簡單。
靜態(tài)分析工具
新標(biāo)準(zhǔn)為語言帶來了許多新的語法,靜態(tài)分析工具正在將此利用起來。
語法檢查(Linting)
ESLint 是最流行的語法檢查工具之一,因此我們維護(hù)了一個(gè)官方的 babel-eslint
整合軟件包。
首先安裝 eslint
和 babel-eslint
。.
$ npm install --save-dev eslint babel-eslint
然后創(chuàng)建或使用項(xiàng)目現(xiàn)有的 .eslintrc
文件并設(shè)置 parser
為 babel-eslint
。.
{
+ "parser": "babel-eslint",
"rules": {
...
}
}
現(xiàn)在添加一個(gè) lint
任務(wù)到 npm 的 package.json
腳本中:
{
"name": "my-module",
"scripts": {
+ "lint": "eslint my-files.js"
},
"devDependencies": {
"babel-eslint": "...",
"eslint": "..."
}
}
接著只需要運(yùn)行這個(gè)任務(wù)就一切就緒了。
$ npm run lint
詳細(xì)信息請(qǐng)咨詢 babel-eslint 或者 eslint 的文檔。
代碼風(fēng)格
JSCS已經(jīng)和ESLint合并,所以請(qǐng)查看ESLint的代碼風(fēng)格。
JSCS 是一個(gè)極受歡迎的工具,在語法檢查的基礎(chǔ)上更進(jìn)一步檢查代碼自身的風(fēng)格。 Babel 和 JSCS 項(xiàng)目的核心維護(hù)者之一(@hzoo)維護(hù)著 JSCS 的官方集成。
更妙的是,JSCS 自己通過 --esnext
選項(xiàng)實(shí)現(xiàn)了這種集成,于是和 Babel 的集成就簡化成了直接在命令行運(yùn)行:
$ jscs . --esnext
或者在 .jscsrc
文件里添加 esnext
選項(xiàng)。
{
"preset": "airbnb",
+ "esnext": true
}
詳細(xì)信息請(qǐng)咨詢 babel-jscs 或是 jscs 的文檔。
文檔
使用 Babel,ES2015,還有 Flow 你可以對(duì)你的代碼進(jìn)行大量的推斷。使用 documentation.js 可以非常簡便地生成詳細(xì)的 API 文檔。
Documentation.js 使用 Babel 來支持所有最新的語法,包括用于在你的代碼中聲明類型所用的 Flow 注解在內(nèi)。
框架
所有主流的 JavaScript 框架都正在努力調(diào)整他們的 APIs 向這門語言的未來看齊。有鑒于此,配套工具方面已經(jīng)做出了大量的工作。
除了使用 Babel 以外,框架更有條件去擴(kuò)展 Babel 來幫助他們提升用戶體驗(yàn)。
React
React 已經(jīng)大幅改變了他們的 API 以適應(yīng) ES2015 的類語法(此處了解更新的 API)。 特別是 React 現(xiàn)在依賴 Babel 編譯它的 JSX 語法且棄用了它原有的自定義工具。 你可以按照上述說明安裝 babel-preset-react
包來開始。.
React 社區(qū)采用 Babel 并圍繞它來運(yùn)行,現(xiàn)在社區(qū)已經(jīng)創(chuàng)建了大量的轉(zhuǎn)換器(transforms)。.
最令人矚目的是 babel-plugin-react-transform
插件,它集成了大量 React 專用轉(zhuǎn)換器可以啟用諸如 熱模塊重載等其他調(diào)試工具。
文本編輯器和 IDEs(集成開發(fā)環(huán)境)
通過 Babel 引入 ES2015,JSX,和流式語法固然是大有裨益,可如果你的文本編輯不支持那可就糟糕透了。 因此,別忘了為你的文本編輯器或是 IDE 安裝 Babel 插件。
Babel 支持
Babel 的社區(qū)非常龐大并且增長速度很快,伴隨著我們成長的同時(shí)我們希望保證人們總能獲取他們需要的所有資源。 所以我們提供了數(shù)種途徑來提供支持。
謹(jǐn)記在所有的這些溝通渠道里我們都共同遵守一套行為準(zhǔn)則。 破壞準(zhǔn)則的行為會(huì)被處理。 所以請(qǐng)閱讀它并在與他人互動(dòng)時(shí)注意自己的行為。
Babel 論壇
Discourse 免費(fèi)為我們提供了一個(gè)托管版本的論壇。 如果你是個(gè)論壇控請(qǐng)不要錯(cuò)過 discuss.babeljs.io。
Babel 聊天
無人不愛 Slack。如果你正在尋求來自社區(qū)的即時(shí)支持,那就來 slack.babeljs.io 和我們聊天吧。
Babel 問題
Babel使用Github提供的問題跟蹤器。.
您可以在Github上看到所有的開放和封閉的問題.
如果你想要打開一個(gè)新的問題:
- 先搜搜看有沒有現(xiàn)存的類似問題
- 創(chuàng)建一個(gè)新的錯(cuò)誤報(bào)告、或請(qǐng)求新功能
創(chuàng)建漂亮的 Babel 錯(cuò)誤報(bào)告
Babel 的問題有時(shí)候很難遠(yuǎn)程調(diào)試,所以我們希望能獲取盡可能詳細(xì)的信息來幫助我們解決問題。 花點(diǎn)時(shí)間去撰寫一份好的錯(cuò)誤報(bào)告會(huì)讓你的問題更快得到解決。
首先,嘗試隔離問題。 并非設(shè)置過程的每一步都是導(dǎo)致問題的原因。 如果你的問題是一段輸入代碼,試著盡可能把與問題不相關(guān)的代碼都刪除掉。