【 JavaScript 】Pipeline operator |>

內容

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

學習目標

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

前置準備作業

• 已安裝 Node.js
• 已安裝 IDE
  • 本範例使用 Visual Studio Code

未使用 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

• MDN
• Babel

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/