webpack 打包 ts 和 socket.io

发表于 更新于 分类于
本文字数： 1.6k 阅读时长 ≈ 1 分钟

Socket.IO 2.x 开始，引擎默认使用 uws，它是个 native module，导致了打包有问题。官方说 uws 引擎的性能会比 ws 要好。

所以解决方案有两种：

方案一（推荐）

报错主要因为缺少解析 native 模块的 loader。所以在 webpack config 中加入 native 的 loader 即可解决问题。
首先安装几个模块

1
2
npm install --save uws@9.14.0
npm install --save-dev node-loader

在 webpack.config.js 中加入 node-loader

1
2
3
4
5
6
7
8
9
module: {
    loaders: [
        ...
        {
            test: /\.node$/,
            loader: 'node-loader'
        }
    ]
}

方案二

把 uws 引擎替换为 ws 引擎：

1
2
3
4
const io = require('socket.io')(myServer, {
    serveClient: true,
    wsEngine: 'ws' // uws is not supported since it is a native module
});

webpack.config.js 中忽略 uws 模块。如果不忽略，打包时会报错：

1
2
3
4
5
6
7
8
[15:28:50] Starting 'dist'...

internal/streams/legacy.js:59
      throw er; // Unhandled stream error in pipe.
      ^
Error: ./node_modules/engine.io/lib/server.js
Module not found: Error: Can't resolve 'uws' in 'E:\projects\push\node_modules\engine.io\lib'
resolve 'uws' in 'E:\projects\push\node_modules\engine.io\lib'

贴一个 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
// webpack.config.js
const path = require("path");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry: {
        "index": "./src/index.ts",
        "index.min": "./src/index.ts",
    },
    target: "node",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"]
    },
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "[name].js"
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: "ts-loader",
            }
        ]
    },
    externals: {
        uws: "uws",
    },
    plugins: [
        new UglifyJsPlugin()
    ],
    node: {
        fs: "empty"
    }
};