github: https://github.com/spcBackToLife/node-webpack4-ts-demo

这篇文章主要是帮助大家去集成Webpack4+node+typescript+hotReload的环境，而不需要自己再去各种查资料。

包含如下内容

  • webpack4 + typescripts
  • node environment
  • nodemon for hot relaod node files

你可以根据以下步骤自己搭建这样的环境，或者是从文章上面的github地址，下载使用这个demo。

初始化项目

1
2
mkdir node-webpack4-ts-demo
cd node-webpack4-ts-demo && npm init # 全部默认，按回车即可

会生成一个 package.json 文件.
然后你可以创建scr目录并创建main.ts: src/main.ts.

添加Typescript

  1. 添加依赖
1
yarn add typescript -D @types/node -D # to recognize the `require`
  1. 项目根目录下添加ts配置文件: tsconfig.json, 此处默认了一些基础配置，大家可以根据自己需要去看ts文档进行自己需求的配置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
    "@/*": ["./*"]
    }, // 定义全局路径快捷方式
     "strictNullChecks": true,
     "module": "commonjs",
     "esModuleInterop": true,
     "importHelpers": true,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true, // 允许使用es6装饰器
     "target": "es6",
     "jsx": "react",
     "lib": [
      "es2017",
      "dom"
     ]
  },
  "include": [
      "src"// write ts in src, you can define your own dir
  ]
}

使用webpack处理typescript

  1. 添加webpack依赖
1
yarn add webpack webpack-cli babel-loader awesome-typescript-loader source-map-loader -D

创建 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const path = require('path');
module.exports = {
    mode: 'development',
    // change to .tsx if necessary
    entry: './src/main.ts',
    target: 'node',
    output: {
      filename: './dist/main.js',
      path: path.join(__dirname, '')
    },
    resolve: {
      // changed from extensions: [".js", ".jsx"]
      extensions: [".ts", ".tsx", ".js", ".jsx"]
    },
    module: {
      rules: [
        { 
          test: /\.ts(x?)$/, use: [
            
            {
              loader: 'babel-loader'
            },
            {
              loader: 'awesome-typescript-loader' 
            }
          ]
        },
        // addition - add source-map support
        { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
      ]
    },
    node: {
        __dirname: false, // handle node dirname filename error after pack
        __filename: false
    },
    // addition - add source-map support
    devtool: "source-map"
  }

使用babel处理node里的import语法

  1. 添加依赖

    1
    yarn add @babel/core @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/preset-env -D

  2. 创建.babelrc文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "entry"
          }
        ]
      ],
      "plugins": [
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-transform-runtime"
      ]
    }

运行node

  1. 添加依赖
1
yarn add nodemon ts-node -D

  1. 运行node
    （1）nodemon运行的时候，可以监控指定的文件夹下的ts，如果有变化，会自动重新运行node。
    （2）ts-node 可以直接运行ts文件，但没有监控文件变化与重启。

    使用nodemon需要创建配置文件：nodemon.json, 其中watch就是需要监控变化的文件夹,本质上流程是：
    启动了nodemon，建立了如下配置中对src的监控，然后运行yarn dev，通过ts-node运行ts。

    1
    2
    3
    4
    5
    6
    {
        "ignore": ["**/*.test.ts", "**/*.spec.ts", ".git", "node_modules"],
        "watch": ["src"],
        "exec": "yarn dev",
        "ext": "ts"
    }

添加运行命令到 package.json

1
2
3
4
5
6
7
8
# `webpack` the js with entry main.ts and user `nodemon` run the packed js
#  use `nodemon` instead of `node` for hot reloading.
{
    ...
    "hot-dev": "nodemon",
    "dev": "ts-node ./src/main.ts"
    ...
}

运行：yarn hot-dev则会监控被监控的ts文件自动重新运行。
运行: yarn dev 则只会运行ts文件，改动后不会自己重新运行。

如果你想运行打包后的js，则添加如下命令到package.json:

1
2
3
4
5
6
{
    ...
    "build-dev": "webpack --config webpack.config.dev.js",
    "start-dev": "yarn build-dev && node ./dist/main.js",
    ...
}

然后 yarn start-dev

最后我们用express试一下nodemon的重启功能, 首先在main.ts写入：

1
2
3
4
5
6
var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello world!');
});
app.listen(3000);

添加Express依赖：yarn add express。
运行： yarn hot-dev
访问：http://localhost:3000, 页面上呈现 Hello world!
修改 Hello world! 为Hello world, 秋泽雨!
再访问：http://localhost:3000, 页面上呈现 Hello world, 秋泽雨!
热更新成功！

github: https://github.com/spcBackToLife/node-webpack4-ts-demo

有问题欢迎加群沟通哦：