如何使用Webpack构建可在Pug预处理器中执行的TypeScript/JavaScript代码

核心思路是让Webpack打包出全量内联依赖、直接挂载到global对象、不依赖CommonJS/AMD/浏览器环境API的纯JS脚本，完全适配Pug内联代码的运行沙箱。

可用Webpack配置 #

入口文件保持你原有写法即可，不需要修改：

// src/entry.ts
export { separateEach3DigitsGroupWithComma } from "@yamato-daiwa/es-extensions";

Webpack配置如下：

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/entry.ts',
  target: 'es2019', // 编译为Pug运行时兼容的JS语法，避免高版本语法报错
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'pug-extensions-bundle.js',
    library: {
      name: '__PUG_EXTENSIONS_EXPORTS__',
      type: 'global',
    },
    globalObject: 'global', // 强制指定全局对象为Node环境的global，而非默认的self/window
    clean: true,
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  externals: {}, // 禁用所有外部依赖，强制把npm包内联到bundle中
  optimization: {
    minimize: false, // 可根据需要开启压缩，不影响功能
  }
};

之前尝试失败的原因 #

• 第一次使用web target：默认全局对象是浏览器环境的self，Pug运行在Node沙箱中*self为undefined*，同时UMD包装优先检测的exports/module对象在Pug内联作用域下也不存在，最终执行到给undefined赋值的逻辑直接报错。
• 第二次使用node16 target：Webpack针对Node目标默认会把所有npm依赖标记为外部依赖，运行时通过require加载，但Pug内联代码的作用域没有暴露require方法，直接报require is not a function错误，且依赖没有被打包进产物。

调用方式 #

把打包生成的JS代码放到你预先实现的Pug前置代码块中，即可正常调用：

include GeneratedExports.pug

-
  const { separateEach3DigitsGroupWithComma } = global.__PUG_EXTENSIONS_EXPORTS__;

.ProductCard
  .ProductCard-Title Lamborghini Urus
  .ProductCard-PriceLabel= separateEach3DigitsGroupWithComma(211321)

兼容旧UMD结构配置 #

如果需要生成和你手里旧样本完全一致的UMD包装结构（兼容其他可能的运行环境），可以把配置调整为如下形式，效果完全一致：

module.exports = {
  // ...其他配置同上
  output: {
    // ...其他output配置同上
    library: {
      name: '__PUG_EXTENSIONS_EXPORTS__',
      type: 'umd',
    },
    globalObject: 'global',
  },
  externalsPresets: {
    node: false, // 关闭Node环境默认的依赖外部化逻辑，所有依赖强制内联
  }
};

生成的代码会和你提供的旧样本逻辑完全匹配：先检测CommonJS/AMD环境，都不存在时直接把导出对象挂载到global上，不会出现未定义的API调用。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD