Webpack 4使用本地模块时重复打包依赖的解决方案咨询

嘿，针对你要在npm里用本地模块、同时实现大型应用模块化拆分（不管单仓还是多仓），还能统一在主项目编译ES6代码的需求，我整理了几个实战中常用的可行方案，都是团队里验证过的，你可以参考下：

这是目前大型项目模块化拆分的主流选择，能完美解决你“模块独立管理但统一编译”的需求，而且依赖管理更高效。

使用npm/pnpm/yarn Workspaces #

不管你用哪个包管理器，它们的Workspace功能都能帮你把多个模块放在同一个仓库里，每个模块有自己的package.json和依赖，同时主项目可以直接引用这些模块，不用单独构建。

配置步骤： #

1. 在根目录的package.json里添加Workspaces配置，指定你的模块路径：

{
  "name": "root-project",
  "private": true,
  "workspaces": [
    "./modules/*",
    "./main-app"
  ]
}

这里假设你的项目结构是：

/root
  /modules
    /module-a
      package.json
      src/
    /module-b
      package.json
      src/
  /main-app
    package.json
    src/
  package.json

2. 执行npm install（或pnpm/yarn），包管理器会自动把各个模块链接到根目录的node_modules里，同时提升公共依赖到根目录，避免重复安装。

主项目引用与编译 #

在main-app里直接像引用第三方包一样导入模块：

import { funcA } from '@my-project/module-a';
import { ComponentB } from '@my-project/module-b';

然后在主项目的构建工具（比如Webpack/Vite/Rollup）里配置，确保能编译这些本地模块的ES6代码：

• 以Webpack为例，调整module.rules让babel编译你的模块：

const path = require('path');

module.exports = {
  resolve: {
    // 可选：用别名简化导入路径
    alias: {
      '@my-project/module-a': path.resolve(__dirname, '../modules/module-a/src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        // 排除node_modules里的第三方包，但包含自己的模块
        exclude: /node_modules(?!\/@my-project)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

这样主项目构建时会统一编译所有本地模块的ES6代码，完全不用每个模块单独执行构建脚本。

如果你的模块必须放在独立仓库里，也有办法实现本地引用+统一编译的需求。

使用npm link + 构建工具配置 #

1. 在本地模块目录执行：

npm link

这会把模块链接到全局的npm模块目录。
2. 在主项目目录执行：

npm link <module-name>

这会把本地模块链接到主项目的node_modules里。
3. 同样在主项目的构建工具里配置编译这个本地模块（和单仓的Webpack配置类似，调整exclude规则包含你的模块）。

⚠️ 注意：npm link可能会导致依赖重复（比如模块和主项目都安装了react），这时候可以在模块的package.json里用peerDependencies声明依赖，让模块复用主项目的版本：

{
  "peerDependencies": {
    "react": "^18.0.0"
  }
}

使用file协议直接引用 #

在主项目的package.json里直接指定本地模块的路径：

"dependencies": {
  "@my-project/module-a": "file:../path/to/module-a",
  "@my-project/module-b": "file:../path/to/module-b"
}

执行npm install后，npm会创建符号链接（或复制文件，取决于npm版本）把本地模块加入node_modules。之后同样需要在构建工具里配置编译这些模块的ES6代码。

• 禁止模块独立构建：每个本地模块的package.json可以设置"private": true（单仓），避免意外发布；同时不要执行模块自己的build脚本，完全依赖主项目的统一编译。
• 依赖优化：单仓模式下利用Workspaces的依赖提升功能，减少重复安装；多仓模式下用peerDependencies复用主项目的公共依赖，降低体积。
• TypeScript支持：如果用TS，主项目的tsconfig.json要通过include或paths配置包含所有本地模块的源码，确保类型检查和编译正常。

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