Babel 用戶手冊(cè)

Babel用戶手冊(cè)

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è)將涉及到一些命令行工具如 nodenpm。在繼續(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è)主要的原因。

  1. 在同一臺(tái)機(jī)器上的不同項(xiàng)目或許會(huì)依賴不同版本的 Babel 并允許你有選擇的更新。
  2. 這意味著你對(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-runtimebabel-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 的命令(如:babelbabel-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 整合軟件包。

首先安裝 eslintbabel-eslint。.

$ npm install --save-dev eslint babel-eslint

然后創(chuàng)建或使用項(xiàng)目現(xiàn)有的 .eslintrc 文件并設(shè)置 parserbabel-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è)新的問題:

創(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)的代碼都刪除掉。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評(píng)論 6 532
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,538評(píng)論 3 417
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評(píng)論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評(píng)論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,761評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,207評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,419評(píng)論 0 288
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,959評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,782評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,983評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評(píng)論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,222評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評(píng)論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,678評(píng)論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,978評(píng)論 2 374

推薦閱讀更多精彩內(nèi)容