编译为单文件的TS前端应用在浏览器中加载Node模块异常

你遇到的核心问题是：TypeScript的outFile选项并不会自动打包npm第三方依赖。

当你设置module: "system"和outFile时，TypeScript只会将你自己编写的TypeScript源码文件合并到output.js中。对于node_modules里的第三方模块（比如lodash），TypeScript只会在输出文件中保留SystemJS风格的导入语句，而不会把这些依赖的代码打包进去。当浏览器通过SystemJS加载output.js时，SystemJS会按照它的默认配置去远程源（比如jspm registry）查找并加载这些缺失的依赖模块，这就是为什么你看到浏览器去请求https://registry.jspm.io/lodash.js。

下面提供两种可行的解决思路，你可以根据自己的场景选择：

方案1：使用SystemJS Builder打包所有依赖 #

SystemJS官方提供了systemjs-builder工具，它可以将你的应用代码和所有npm依赖打包成一个单独的文件。步骤如下：

1. 安装SystemJS Builder

npm install systemjs-builder --save-dev

2. 创建SystemJS配置文件（systemjs.config.js）
   这个文件用来告诉SystemJS如何查找你的npm依赖：

System.config({
  paths: {
    'npm:': './node_modules/'
  },
  map: {
    // 映射lodash到本地node_modules路径
    'lodash': 'npm:lodash/lodash.js'
  },
  packages: {
    'lodash': {
      main: 'lodash.js',
      format: 'umd'
    }
  }
});

3. 编写构建脚本（build.js）

const Builder = require('systemjs-builder');

// 初始化builder，指定项目根目录和SystemJS配置文件路径
const builder = new Builder('./', './systemjs.config.js');

// 打包入口模块Application到单个文件
builder.buildStatic('Application', 'output.bundle.js', {
  sourceMaps: true, // 保留sourcemap
  minify: false // 如需压缩可以设为true
})
.then(() => console.log('打包完成！'))
.catch(err => console.error('打包出错：', err));

4. 执行构建

node build.js

生成的output.bundle.js会包含你的应用代码和所有依赖（比如lodash），之后你只需要在浏览器中加载这个文件即可，不需要再依赖SystemJS远程加载模块。

方案2：改用Webpack/Rollup等现代打包工具 #

如果可以调整技术栈，Webpack或Rollup这类工具更适合处理TypeScript应用的完整打包流程，它们能自动处理npm依赖的解析、打包，并且支持更多优化特性。

以Webpack为例，大致步骤：

1. 安装依赖

npm install webpack webpack-cli ts-loader typescript --save-dev

2. 创建webpack.config.js

module.exports = {
  entry: './src/Application.ts', // 你的应用入口文件
  output: {
    filename: 'output.bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
};

3. 执行打包

npx webpack --mode production

生成的打包文件会包含所有依赖，直接在浏览器中加载即可，不需要SystemJS参与引导。

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