前言

前一陣子搞了個(gè)nest項(xiàng)目，當(dāng)我開發(fā)完一個(gè)功能，打算部署到服務(wù)器進(jìn)行測(cè)試時(shí)，發(fā)現(xiàn)它跑不起來，報(bào)了一大堆錯(cuò)缺少了很多依賴包。

我?guī)缀跽冶榱巳W(wǎng)的解決方案，他們的答案齊刷刷只有一個(gè)：nest在打包時(shí)，不會(huì)將依賴打包進(jìn)去，需要在服務(wù)器上clone項(xiàng)目，安裝依賴。

這個(gè)答案不是我想要的，在服務(wù)器上安裝node_modules純屬胡鬧。幸運(yùn)的是，經(jīng)過一番研究后，我終于解決了這個(gè)問題，本文就跟大家分享下我的實(shí)現(xiàn)思路與方案，歡迎各位感興趣的開發(fā)者閱讀本文。

場(chǎng)景概述

我們繼續(xù)用文章“使用NestJS搭建服務(wù)端應(yīng)用[1]”所創(chuàng)建的項(xiàng)目，以此為基礎(chǔ)來描述這個(gè)問題，我們打開package.json文件，執(zhí)行里面的build命令。

{
    "scripts": {
      "build": "nest build",
    }
}

一眨眼的功夫，它就打包好了，在你的項(xiàng)目根目錄下會(huì)多出一個(gè)dist文件夾，如下如所示，這就是它所打包出來的文件。

緊接著，我們把dist目錄上傳到服務(wù)器，用node來執(zhí)行其目錄下的main.js文件，上傳文件至服務(wù)器后，我發(fā)現(xiàn)整個(gè)文件夾竟然只有18KB，我當(dāng)時(shí)驚呆了，心想js這么牛的嗎!開發(fā)出來的服務(wù)端應(yīng)用包體積居然這么小，同樣的功能使用Java實(shí)現(xiàn)，打包出來的jar包都50MB起步了!

當(dāng)我在服務(wù)器上運(yùn)行時(shí)，我傻眼了，程序報(bào)錯(cuò)跑不起來??，這玩意兒不經(jīng)夸啊。

定位問題

我懷著忐忑的心情打開dist的目錄下的文件后，發(fā)現(xiàn)它只是簡(jiǎn)單的把ts編譯成了js，并沒有打包任何依賴包進(jìn)去，他所有的依賴包都是從node_modules中引的。我們的服務(wù)器上是沒有這些依賴包的，所以他就報(bào)錯(cuò)了。

在搜索引擎上找了下解決方案，千篇一律的要在服務(wù)器上clone項(xiàng)目，然后在服務(wù)器上安裝龐大的node_modules，簡(jiǎn)直是無稽之談。

跟幾個(gè)人交流后，他們說node項(xiàng)目本來就是這樣啊，都是在服務(wù)器上安裝依賴包的，這讓我想起了好多年前看到的一個(gè)圖，用在此處極為合適。

解決方案

我是一個(gè)追求完美的人，這么龐大的一個(gè)開源庫，設(shè)計(jì)者一定不會(huì)這么傻吧，這種低級(jí)問題應(yīng)該早就考慮到了才對(duì)，既然網(wǎng)上找不到方案，那我就讀一下它的源碼吧。

皇天不負(fù)有心人，當(dāng)我在查閱nest-cli源碼的打包模塊時(shí)，在@nestjs/cli/actions/build.action.js文件中發(fā)現(xiàn)了它有個(gè)配置變量webpack。

隨后，我在nest的官方文檔中，在nest-build[2]章節(jié)找到了這個(gè)配置項(xiàng)的相關(guān)內(nèi)容，發(fā)現(xiàn)他可以在打包命令后面添加--webpack參數(shù)來生成單文件main.js。

于是，我添加了這個(gè)參數(shù)，運(yùn)行打包命令后，單文件是生成了，但是依賴文件依然沒打包進(jìn)去。出現(xiàn)這種情況那就只有一種可能了：nest-cli在打包時(shí)排除屏蔽了依賴包。

順藤摸瓜，我在@nestjs/cli/lib/compiler/defaults/webpack-defaults.js發(fā)現(xiàn)了貓膩，如下圖所示：

它使用webpack-node-externals插件屏蔽了依賴的打包。

實(shí)現(xiàn)代碼經(jīng)過上面的分析，我們定位到了問題所在，既然它默認(rèn)屏蔽了依賴的打包，那我們就自己創(chuàng)建一個(gè)webpack.config.js文件，忽略掉externals以及一些nest提供的插件，這個(gè)問題就完美解決了，實(shí)現(xiàn)代碼如下所示：

• 將externals屬性置為空，就忽略掉了默認(rèn)的webpack-node-externals插件
• 使用IgnorePlugin忽略掉了nest中的一些無用依賴包

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require("path");
const webpack = require("webpack");
// fork-ts-checker-webpack-plugin需要單獨(dú)安裝
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

module.exports = {
  entry: "./src/main",
  target: "node",
  // 置為空即可忽略webpack-node-externals插件
  externals: {},
  // ts文件的處理
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: {
          loader: "ts-loader",
          options: { transpileOnly: true }
        },
        exclude: /node_modules/
      }
    ]
  },
  // 打包后的文件名稱以及位置
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  resolve: {
    extensions: [".js", ".ts", ".json"]
  },
  plugins: [
    // 需要進(jìn)行忽略的插件
    new webpack.IgnorePlugin({
      checkResource(resource) {
        const lazyImports = [
          "@nestjs/microservices",
          "@nestjs/microservices/microservices-module",
          "@nestjs/websockets/socket-module",
          "cache-manager",
          "class-validator",
          "class-transformer"
        ];
        if (!lazyImports.includes(resource)) {
          return false;
        }
        try {
          require.resolve(resource, {
            paths: [process.cwd()]
          });
        } catch (err) {
          return true;
        }
        return false;
      }
    }),
    new ForkTsCheckerWebpackPlugin()
  ]
};

??注意：上述webpack配置文件要求package.json中webpack的版本號(hào)為^5.11.0"，還需要安裝fork-ts-checker-webpack-plugin依賴包到devDependencies中。

最后，我們修改打包命令為：

{
    "scripts": {
       "build": "nest build --webpack --webpackPath=./webpack.config.js",
    }
}

執(zhí)行上述命令后，我們發(fā)現(xiàn)依賴包已經(jīng)打入main.js了，文件體積也上升到了3.6mb。

最后，我們用node來運(yùn)行這個(gè)js文件，也沒有了報(bào)錯(cuò)，順利的跑起來了。

我們?cè)倌胮ostman來測(cè)試下接口能否正常訪問，如下所示，也都可以正常訪問。

小tips：在服務(wù)器上運(yùn)行node項(xiàng)目時(shí)，通常會(huì)使用pm2來執(zhí)行。對(duì)此感興趣的開發(fā)者，請(qǐng)自行了解。

示例代碼

本文中所列舉的完整代碼請(qǐng)移步：

• webpack.config.js[3]
• package.json[4]

參考資料

[1]使用NestJS搭建服務(wù)端應(yīng)用: https://juejin.cn/post/7053840108331466783

[2]nest-build: https://docs.nestjs.com/cli/usages#nest-build

[3]webpack.config.js: https://github.com/likaia/nest-project/blob/436b8ebdfe1c9b5f69a27e2dfdbc001ba6d78753/webpack.config.js

[4]package.json: https://github.com/likaia/nest-project/blob/436b8ebdfe1c9b5f69a27e2dfdbc001ba6d78753/package.json#L9

[5]個(gè)人網(wǎng)站: https://www.kaisir.cn/