如何配置Webpack打包仅暴露指定导出项的Node.js TS/JS类库

核心实现思路 #

不要直接把多个零散文件作为Webpack入口，先做一层导出收敛，再通过Webpack的类库输出规则控制对外暴露的内容，内部依赖会自动被打包进产物但不会对外暴露。 #

具体操作步骤 #

1. 新建统一入口文件做导出收敛 #

在src目录下新建index.ts作为唯一打包入口，仅导出需要对外暴露的内容，内部依赖文件不要在此处导出：

// src/index.ts
// 仅导出需要对外暴露的file1、file2内容
export * from "./file1";
export * from "./file2";

// 注意：不要引入或导出file3等仅内部使用的文件

2. 调整Webpack配置 #

针对Node.js类库场景修改webpack.config.js（注意Webpack配置文件不推荐使用json格式，无法支持动态配置逻辑），核心配置项如下：

const path = require('path');

module.exports = {
  // 指向刚才新建的统一入口
  entry: './src/index.ts',
  // 指定运行环境为Node.js，避免打包fs、path等Node内置模块
  target: 'node',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    // 适配Node.js CommonJS模块规范
    library: {
      type: 'commonjs2',
    },
  },
  // 类库场景建议关闭代码混淆压缩，避免消费方调试时定位不到源码
  optimization: {
    minimize: false,
  }
};

3. 配套TypeScript配置（供TS项目消费） #

修改tsconfig.json开启类型声明文件生成，保证消费方可以拿到正确的TS类型提示：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "strict": true,
    // 生成d.ts类型声明文件
    "declaration": true,
    "declarationDir": "./dist/types",
    "outDir": "./dist",
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

最后在package.json里指定类库入口和类型路径即可：

{
  "main": "./dist/index.js",
  "types": "./dist/types/index.d.ts"
}

注意事项 #

• 不要使用Webpack多入口配置实现该需求，多入口会生成多个独立bundle，适合多页面应用场景，不适合单文件类库打包
• 不要在统一入口文件里引入内部未导出的变量，否则可能被Webpack挂到导出对象上造成内部逻辑泄漏
• 如果需要兼容ESM模块规范，可以把output.library.type改成module，同时在package.json里加"type": "module"，纯Node.js CommonJS场景保持commonjs2即可

效果验证 #

执行打包命令后，最终产物只会对外暴露MyComponent1、MyComponent2、myFunc、myOtherFunc四个成员，file3.ts里的MyComponent3会作为内部依赖被打包进bundle，不会被消费方访问到。

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