node-dev-server

Serves a Node.js app. Restart the app on changes.

Description

Serves a Node.js app. Restart the app on changes. Just like the webpack-dev-server but this is not web.

Why not use the nodemon?

1. We use webpack5, not simply watch the OS File-System events;

2. We can kill existing process (tree), compile and restart a cmd.exe window of a terminal on source-code changes.

(Only implemented on the Windows OS currently, and Gnome-terminal)

Install

This is a CLI program, install the global command "node-dev-server" or "nds" by:

$ yarn global add @develon/node-dev-server

or

$ npm install --global @develon/node-dev-server

Version 1.3.0 增加了模块解析, 需要全局安装webpack以及webpack-cli:

$ yarn global add webpack webpack-cli

Usage

Start watching a project:

$ nds [project]

For example, watch and compile the project "uexpress":

node-dev-server $ cd uexpress
uexpress $ yarn install       #Installation dependencies
uexpress $ nds .              #Start watching

Then you can see this output, and a new cmd.exe window running the project "uexpress":

[I] 项目根目录: D:\node-dev-server\uexpress
[I] 最终Webpack配置: {
  "mode": "none",
  "target": "node",
  "externals": [
    "[Function: excludeNodeModules]"
  ],
  "entry": {
    "main": "D:\\node-dev-server\\uexpress\\src\\index.js"
  },
  "output": {
    "path": "D:\\node-dev-server\\uexpress\\dist",
    "filename": "[name].js"
  },
  "module": {
    "rules": [
      {
        "test": "/\\.js$/",
        "use": []
      },
      {
        "test": "/\\.ts$/",
        "use": [
          "babel-loader",
          "ts-loader"
        ]
      }
    ]
  },
  "watch": true
}
[I] 输出目录: D:\Code\Node\pure-node\webpack-usage\uexpress\dist
[V] 导入：D:\Code\Node\pure-node\webpack-usage => D:\Code\Node\pure-node\webpack-usage\uexpress\src\index.js
[V] 导入：D:\Code\Node\pure-node\webpack-usage\uexpress\src => colors
[V] 运行时依赖: colors由node_modules提供 => colors = require('colors')
[V] 导入：D:\Code\Node\pure-node\webpack-usage\uexpress\src => express
[V] 运行时依赖: express由node_modules提供 => express = require('express')
[I] 编译完成！
[V] start "uexpress" /WAIT cmd /c "cd /D "D:\Code\Node\pure-node\webpack-usage\uexpress\dist" && "node" ./main.js & pause"
[I] 项目 uexpress 已启动, root PID：40996
[V] 耗时：112 ms
[V] 等待文件变化，或使用命令“rs"重启程序
[I] 关闭 D:\Code\Node\pure-node\webpack-usage\uexpress ...
[I] 关闭 node-dev-server ...

开箱即用的TypeScript支持

创建TypeScript项目：

$ nds create "app" && cd "app"

app $ yarn setup
app $ vi src/index.ts      #edit project entry
app $ nds .                #compile and watch

or

$ mkdir app && cd app
app $ yarn init -y         #initialize a Node.js project

app $ nds init .           #init nds project

app $ yarn setup
app $ vi src/index.ts      #edit project entry
app $ nds .                #compile and watch

脚本yarn setup做了什么事？它主要弹出一个与用户环境相关的js模块——nds-babel.js：

nds --eject && yarn add -D @types/node

Electron-main支持

nds创建的模板项目自带类型声明文件electron.d.ts。必要时可全局安装electron，然后link到本地以提供相应版本的类型支持。 要开发electron-main应用程序, 直接修改webpack配置文件的目标为electron-main, nds会使用electron而不是node来执行dist/main.js:

const CONFIG = {
  target: 'electron-main',
  ...
}

About

该程序通过读取并处理webpack.config.js文件, 使用Webpack提供的API函数 -- webpack() 编译并处理编译状态。

const webpack: (options: Configuration, callback?: CallbackWebpack<Stats>) => Compiler
const webpack: (options: Configuration[], callback?: CallbackWebpack<Stats>) => Compiler