[譯]使用Babel7+nodemon打造你的Node.js專案開發

Bangood發表於2019-04-23
BabelNode.js

    

   

原文地址：Using babel7 with node(https://hackernoon.com/using-babel-7-with-node-7e401bc28b04)
原文作者：Will Willems
譯者：Bangood複製程式碼

    想在你的Node.js專案中使用最新的js語法嗎？想讓你的專案具備熱更新能力嗎？本文的目標就是讓你能夠搭建起這樣的一個基本專案。[譯]使用Babel7+nodemon打造你的Node.js專案開發


    大家之前可能用過babel的其他低版本，但是今天我們使用的babel7和其他低版本有一些不同之處。

   1.Babel7的相關包都掛在了@babel域下。比如之前的babel-cli包現在更名為@babel/cli。

   2.@babel/preset-env囊括了以前所有以年份命名的presets的功能。

   3.babel-node從CLI中提取出來成了一個獨立的包：@babel/node。

   想了解更多的關於babel7的變化的，可以到官網檢視。

   設定node專案結構

   我們先開啟我們的命令列終端工具：windows下，win+R，輸入cmd，回車，進入命令列工具。

   建立我們的專案資料夾：mkdir my-project。

   切換到專案資料夾：cd my-project。

   我們用Git管理我們的專案，所以，我們執行一下：git init 命令。

   執行npm init初始化我們的專案，會自動生成一個package.json檔案。

   我們再在當前目錄下建立兩個資料夾：dist和src。這是我們的專案結構如下：

  my-project
    |--dist
    |--src
    |--package.json
複製程式碼

   讓我們現在src目錄下建立一個我們整個專案的入口檔案server.js

my-project
    |--dist
    |--src
    |  |--server.js
    |--package.json複製程式碼

    要在我們的專案中使用babel7,我們執行npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. 

  為了告訴babel如何使用@babel/preset-env包，我們需要在我們專案的根目錄下建立檔案：.babelrc。

// .babelrc
{  
"presets": ["@babel/preset-env"]
}複製程式碼

    在編寫除錯Node.js專案，修改程式碼後，需要頻繁的手動close掉，然後再重新啟動，非常繁瑣。現在，我們可以通過npm install --save-dev nodemon，在我們的專案中引入nodemon這個工具，它的作用是監聽程式碼檔案的變動，當程式碼改變之後，自動重啟。

   到目前為止，我們的專案結構如下：

  

 my-project    
    |--dist
    |--node_modules
    |--src
    |  |--server.js
    |--package.json
    |--.babelrc
複製程式碼

    新增scripts到package.json

    在最後，我們新增一些npm命令到我們的package.json檔案。

  • 新增start命令 ：nodemon --exec babel-node src/server.js 。這個命令是告訴nodemon去監聽檔案的變化，一旦檢測到有檔案發生了變化，就會重啟並用babel-node去執行src/server.js檔案。這個命令一般用於本地開發。
  • 新增build命令：babel src --out-dir dist。這個命令是告訴babel去編譯src裡的原始檔，並將得到的結果輸出到dist中
  • 新增serve命令：node dist/server.js。這個命令是讓我們用node執行我們編譯好的檔案。可能有人會問，為什麼我們不直接用nodemon去執行我們的程式呢？這是因為相較於node,使用nodemon執行我們的程式會使用更多的記憶體，花費更多的啟動時間。
    當我們新增了以上三個命令後，package.json裡的內容就和下面的類似了：

   

 {  
    "name": "my-project",
    "version": "1.0.0",
    "description": "",  
    "main": "src/server.js",
    "scripts": {    
        "start": "nodemon --exec babel-node src/server.js",    
        "build": "babel src --out-dir dist",    
        "serve": "node dist/server.js"  
     },  
    "author": "",  
    "license": "MIT",  
    "dependencies": {  },  
    "devDependencies": {    
        "@babel/cli": "7.4.3",    
        "@babel/core": "7.4.3",    
        "@babel/node": "7.2.2",    
        "@babel/preset-env": "7.4.3",    
        "nodemon": "1.18.11"  
      }}複製程式碼



相關文章