使用 Babel 支援 Pipeline Operator | 點燈坊

Pipeline Operator 是 ECMAScript 最受期待新功能，它將完全改變 ECMAScript 寫法，唯目前只是 Stage 1，只要在 Babel 另外安裝 Plugin，就可提早享受類似 F# 的 |>。

Version

macOS Catalina 10.15.1
WebStorm 2019.3
Node 13.2.0
Babel 7.6.4

Plugin Installation

$ yarn add @babel/core @babel/cli @babel/preset-env @babel/node --dev

安裝 Babel 所需 package。

$ yarn add @babel/plugin-proposal-pipeline-operator --dev

安裝 @babel/plugin-proposal-pipeline-operator，由於是 Babel 使用，安裝成 devDependencies 即可。

package.json

Babel Configuration

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ]
  ]
}

在 project 根目錄新增 .babelrc 設定 plugin。

目前 pipeline operator 有三種 proposal，可設定成 minimal、start 或 fsharp。

Pipeline Operator

let double = n => n * 2;
let inc = n => n + 1;

console.log(inc(double(5)))

5 |> double |> inc |> console.log

傳統 f(g(x))，可以改用 g |> f 寫法，可讀性更高，更能體現 pipeline 精神。

Conclusion

• |> 為 F# 所創，能省略中繼變數，其由左向右比 f(g(x)) 的由右向左可讀性更高

Sample Code

完整範例可在我的 GitHub 上找到

Reference

Babel, @babel/plugin-proposal-pipeline-operator
MDN, Pipeline operator