LearningSky.io

【 JavaScript 】Pipeline operator |>

Archer -

內容

  • 學習目標
  • 前置準備作業
  • 未使用 pipeline operator 模式
  • 使用 pipeline operator 模式

學習目標

  • 透過 pipeline operator 方式來簡化程式碼與容易閱讀

前置準備作業

未使用 pipeline operator 模式

Step 1. 使用傳統 function 包 function 的方式

  • 如下方的第 7 行
  • 新增 index.js 存放下方的程式碼

Step 2. 執行程式

  • 請在終端機輸入下方指令

    node index.js

使用 pipeline operator 模式

Step 1. 透過 |> 的 pipeline operator 來串接多個 function

  • 如下方的第 7、8、9、10 行

  • 修改 index.js 存放下方的程式碼

Step 2. 安裝 Babel

  • 請在終端機輸入下方指令
    npm install --save-dev nodemon @babel/core @babel/node @babel/preset-env @babel/plugin-proposal-pipeline-operator

Step 3. 新增 dev script 至 package.json

  • 開啟 package.json 新增下方指令到 script 中

    "dev": "nodemon --exec babel-node index.js"

    • 原始的 package.json 檔

    • 新增後的 package.json 檔 (第 8 行)

Step 4. 設定 .babelrc

  • 於專案的根目錄新增 .babelrc 檔案並新增下方資訊
    {     "plugins": [       [         "@babel/plugin-proposal-pipeline-operator",         {           "proposal": "minimal"         }       ]     ]   }

Step 5. 執行程式

  • 請在終端機輸入下方指令

    npm run dev

Reference
GitHub
List of blogs