/ Node.js

【 JavaScript 】Pipeline operator |>

內容

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

學習目標

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

前置準備作業


未使用 pipeline operator 模式

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

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

Step 2. 執行程式

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

    node index.js
    

    ---2020-04-01---4.31.55


使用 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 檔
      ---2020-04-01---4.24.30

    • 新增後的 package.json 檔 (第 8 行)
      ---2020-04-01---4.25.18


Step 4. 設定 .babelrc

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

Step 5. 執行程式

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

    npm run dev
    

    ---2020-04-01---4.38.21


Reference
GitHub
List of blogs
Archer

Archer

Having being a software engineer. Experience with Python, JavaScript, Node.js, Objective-C, Micro:bit, Raspberry Pi, AWS, Azure, IoT. ❆ [email protected] https://oranwind.org/author/archer/

Read More