如何在NX工作空间中将TypeScript项目编译为独立单文件产物

NX完全支持输出无外部依赖的独立单文件产物，以下是两种常用的配置方案，你可以根据之前的技术栈选择：

该方案适合习惯用Webpack、有复杂打包自定义需求的场景，和你之前的Webpack打包效果完全一致：

• 首先确认你的项目project.json中build目标的执行器为@nx/webpack:webpack
• 找到项目根目录下的webpack.config.js，替换为以下配置：

const { composePlugins, withNx } = require('@nx/webpack');

module.exports = composePlugins(withNx(), (config) => {
  // 替换为你的实际入口文件路径
  config.entry = './src/main.ts';
  config.output = {
    ...config.output,
    // 自定义输出的单文件名
    filename: 'bundle.js',
    path: require('path').join(__dirname, 'dist'),
    // 输出自执行函数格式，可直接在浏览器环境运行
    libraryTarget: 'iife',
    clean: true,
  };
  // 关键配置：关闭NX默认的依赖外置逻辑，所有依赖全部内联进产物
  config.externals = [];
  // 关闭代码拆分，强制所有内容打包到单文件
  config.optimization.splitChunks = false;
  config.optimization.runtimeChunk = false;
  return config;
});

• 执行nx build 你的项目名，dist目录下输出的bundle.js就是无import/require语句的独立单文件，直接复制到浏览器即可运行。

适合轻量TS项目，打包速度比Webpack快数倍：

• 确认项目project.json中build目标的执行器为@nx/esbuild:esbuild
• 修改build目标的配置参数如下：

{
  "targets": {
    "build": {
      "executor": "@nx/esbuild:esbuild",
      "options": {
        "outputPath": "dist/apps/你的项目名",
        // 替换为你的实际入口文件路径
        "main": "apps/你的项目名/src/main.ts",
        "tsConfig": "apps/你的项目名/tsconfig.app.json",
        // 开启全量打包
        "bundle": true,
        // 目标平台为浏览器
        "platform": "browser",
        // 输出自执行函数格式
        "format": ["iife"],
        // 不外置任何依赖，全部内联
        "external": [],
        // 强制输出单文件
        "singleBundle": true,
        // 可选：开启代码压缩
        "minify": true
      }
    }
  }
}

• 执行nx build 你的项目名即可得到符合要求的单文件产物。

打包完成后你可以直接打开产物搜索import、require关键字，确认没有外部依赖引用即可正常使用。

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri