跳到主要內容

安裝

設定編譯器​

首先，您需要設定一個編譯器來移除 Flow 類型。您可以在 Babel 和 flow-remove-types 之間選擇。

Babel 是支援 Flow 的 JavaScript 程式碼編譯器。Babel 會取得您的 Flow 程式碼並移除任何類型註解。如果您已在專案中使用 Babel，請參閱 使用 Babel。

首先使用 Yarn 或 npm 安裝 @babel/core、@babel/cli、@babel/preset-flow 和 babel-plugin-syntax-hermes-parser。

npm install --save-dev @babel/core @babel/cli @babel/preset-flow babel-plugin-syntax-hermes-parser

接下來，您需要在專案的根目錄建立一個 .babelrc 檔案，其中包含 @babel/preset-flow 預設值和 babel-plugin-syntax-hermes-parser 外掛程式。

{
  "presets": ["@babel/preset-flow"],
  "plugins": ["babel-plugin-syntax-hermes-parser"],
}

如果您將所有原始檔放在 src 目錄中，則可以透過執行下列指令將它們編譯到另一個目錄中

./node_modules/.bin/babel src/ -d lib/

您可以輕鬆地將此內容新增至您的 package.json 腳本，並與您在 Babel 上的 "devDependencies" 並列。

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src/ -d lib/",
    "prepublish": "yarn run build"
  }
}

注意：您可能會想要新增一個 prepublish 腳本，同時執行此轉換，以便在您將程式碼發佈至 npm 登錄檔之前執行。

設定 Flow​

Flow 最好以明確的版本控管逐一專案安裝，而不是全域安裝。

幸運的是，如果您已經熟悉 npm 或 yarn，這個流程應該非常熟悉！

在 flow-bin npm 套件上新增 devDependency​

npm install --save-dev flow-bin

在您的 package.json 中新增 "flow" 腳本​

{
  "name": "my-flow-project",
  "version": "1.0.0",
  "devDependencies": {
    "flow-bin": "^0.233.0"
  },
  "scripts": {
    "flow": "flow"
  }
}

執行 Flow​

第一次執行

npm run flow init
> [email protected] flow /Users/Projects/my-flow-project
> flow "init"

第一次使用 init 執行 flow 之後，執行

npm run flow
> [email protected] flow /Users/Projects/my-flow-project
> flow

No errors!

設定 ESLint​

如果您使用 ESLint，您可以閱讀 我們關於 ESLint 的頁面，以設定它來支援 Flow。