環境安裝

必要環境安裝

編譯器設定

說到底我們的程式還是要給編譯器看的，Flow 程式編譯器是看不懂的，這時候就要把我們的程式預先編譯成編譯器看得懂的，我們可以選用 Babel 或 flow-remove-types。本書選用的是 Babel。

Babel 呢，是專門用來處理 JavaScript 的轉換器，它提供了 ES6 向下兼容的功能、語法轉換等等功能。更甚至可以支援 Flow 語法。 Babel 會解析 Flow 語法，將型別註解移除轉換為一般的 JavaScript。

首先，我們需要安裝 @babel/core, @babel/cli, @babel/preset-flow

npm install --save-dev @babel/core @babel/cli @babel/preset-flow

安裝完之後建立 .babelrc 檔案，在 preset 區塊內加入 "@babel/preset-flow" 告訴 babel 如何處理 Flow 的內容。

{
  "presets": ["@babel/preset-flow"]
}

再來將前篇範例的檔案加到 src 資料夾內後執行

./node_modules/.bin/babel src/ -d lib/                                                               00:36:41

也可以加到 package.json 的 scripts 內

{
  "name": "test-prj",
  "main": "index.js",
  "scripts": {
    "build": "babel src/ -d lib/",
    "prepublish": "npm run build"
  }
}

以下給個編譯前後範例。

編譯前

src/index.js

// @flow
function square(n: number): number {
  return n * n;
}

square(2);

編譯後

lib/index.js

function square(n) {
  return n * n;
}

square(2);

可以看到 babel 編譯過後把最上面的 // @flow 跟 Flow 的型別註解都拿掉了，變成了一個再單純不過的 JavaScript 程式碼。

為什麼 package.json 內要特別加個 prepublish 呢？ 因為 prepublish 會在 npm publish 之前執行，這樣可以保證在發佈到 npm 的時候一定是經過編譯的程式。算是一個好習慣吧！！ ( 也會在 npm install 的時候執行哦，見官方文件 )

設定 Flow 環境

用於檢查初始化 Flow 專案、檢查檔案內 Flow 規則。

如果使用過 @vue/cli 或 create-react-app 等工具，其實使用上也差不多！

首先安裝 flow-bin 到 devDependency

npm install --save-dev flow-bin

再加入 "flow" 到 package.json 中的 scripts 內

{
  "name": "test-prj",
  "main": "index.js",
  "scripts": {
    // ... 略過 ...
    "flow": "flow"
  },
  "devDependencies": {
    "flow-bin": "^0.145.0"
  }
}

執行 Flow:

第一步先初始化專案:

npm run flow init

> flow
> flow "init"

執行成功的話會產生一個 .flowconfig 檔案

完成後再來檢查專案:

npm run flow

> flow
No errors!

詳細使用下個章節再來細細解說！