建立最小 node.js 專案，快速開始寫程式

記得以前我們公司有一次對前端工程師進行 JavaScript 測驗(筆者是後端工程師)，有一位同仁可能是很緊張，一時之間反應不太過來，不知道要如何單純寫 js 並執行。後來是將程式碼寫在 .js 檔案中，然後使用指令視窗使用 node 執行這個 .js 檔案：

    
    node my.js
    

距離事發時間有點久了，不確定具體使用什麼指令執行，但是那時該同仁每次修改後再執行好像都要 3, 4 個步驟，輸出結果顯示在指令視窗中，那時候筆者就有一個疑問，為什麼不直接寫 .html 檔案，然後在網頁中開啟，這樣只要重新整理就好了(該同仁後來表示太緊張了沒想到)。
於是後來筆者又想到，假設這時候考試題目要求使用 npm 安裝套件，該怎麼做(靜態檔案 server 沒有辦法簡單的處理 ES6 的 import 語法)？身為大部分時間都寫後端的軟體工程師，通常會寫 JS 時都是使用 Vue 框架，所以應該會直接建立 Vue3 或是 Nux3 (另一個基於 Vue3 的框架)專案然後安裝 npm 套件，但是這樣做太慢了，初始化後下載框架必要套件再等專案跑完可以執行可能都超過五分鐘，應該可以直接當作考核失敗被淘汰要收拾辦公桌了(誤)，那最快的方式是什麼呢？

其實就是建立一個最小的 Node.js 專案(只要 package.json 檔案)，然後建立一個 html 檔案，直接在裡面寫 js ，並且使用 serve 這個靜態文件伺服器啟動就好了，非常快速。

安裝 Node.js

如果還沒安裝 node 可以看下面這兩篇，使用指令安裝 node.js ，並且可以快速切換版本，非常方便。
透過 NVM 快速安裝和管理 Node.js 版本 教學 (Windows)
透過 NVM 快速安裝和管理 Node.js 版本 教學 (Linux)

建立最小 node.js 專案

建立一個薪資料夾，在裡面執行下面的指令，不用回答什麼問題，也不用狂按 Enter，會直接建立一個最基本的 package.json 檔案：

    
npm init -y
    

安裝你需要用到的套件，假設安裝 lit 套件：

    
npm i lit
    

建立一個 index.html 檔案，可以直接在裡面寫 html 和 js

然後安裝 dev-server 套件

    
npm install @web/dev-server --save-dev
    

修改 package.json 中的 scripts ，增加 start 參數(注意要在上面一行補上逗號 ',')：

    
{
  "scripts": {
    "test": "echo \"Error: no test specified\"  && exit 1",
    "start": "web-dev-server --node-resolve --watch"
  }
}
    

然後就可以使用下面的指令來啟動了

    
npm run start
    

執行結果如下：

    
 npm start

> my-project@1.0.0 start
> web-dev-server --node-resolve --watch

Web Dev Server started...

  Root dir: C:\Users\ruyut\my-project
  Local:    http://localhost:8000/
  Network:  http://192.168.50.165:8000/
    

依照輸出結果，直接開啟 http://localhost:8000/ 網頁就可以了！

為什麼要安裝 @web/dev-server 套件呢？因為假設我們有需要使用類似下面 ES6 的 import 引用模組的語法時才能動成功處理

    
import {LitElement} from 'lit';
    

不然就會出現類似下面的錯誤：

    
TypeError: Specifier「lit」是 bare specifier，但未被重新對應。相對模組指定器必須以「./」、「../」或「/」開頭。
    

處理 TypeScript

瀏覽器並不知道 TypeScript 是什麼，需要將 TypeScript 翻譯為 JavaScript 。如果需要使用 Type 還要經過下面的步驟：

安裝 TypeScript 相關套件

    
npm install typescript @web/dev-server-esbuild --save-dev
    

建立 tsconfig.json 檔案 (可以直接使用 tsc --init 語法產生檔案，但是有些設定會不同，這裡直接貼上示範檔案)

    
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["*.ts"]
}
    

增加 web-dev-server.config.js 檔案：

    
const { esbuildPlugin } = require('@web/dev-server-esbuild');

module.exports = {
    plugins: [
        esbuildPlugin({ ts: true })
    ],
};
    

修改 package.json 中 scripts 的 start 指令：

    
{
  "scripts": {
    "start": "tsc && web-dev-server --node-resolve --watch"
  }
}
    

這樣就會在執行時自動轉換、可以讀取 TypeScript 檔了。

如果沒有增加 web-dev-server.config.js 檔案很可能會出現下面的錯誤：

    
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.