javascript - 处理 monorepo 时如何正确使用 lerna 和 webpack

Question

我正在构建一个 monorepo，它将包含使用 React 构建的 UI 工具包的所有单个组件。

我正在使用lerna，因为我没有使用 monorepo/multi 包配置的经验，现在我有了这个结构：

index.js
packages/
  pack1/
  pack2/

我想构建每个包，webpack但只想在根文件夹中使用一个，并在每个包目录webpack.config.js中创建一个命令。pack*.dist.js

可能吗？有什么方向吗？

Answer 1

这个问题相当笼统，是一个开放式的问题，但这是一个开始。

我想用 webpack 构建每个包，但只想在根文件夹中使用一个 webpack.config.js，并在每个包目录中使用一个命令来创建一个 pack*.dist.js。

可能吗？有什么方向吗？

是的，有可能。您需要在文件中列出pack1和pack2作为。您可能还希望将所有常见的第三方和内部依赖项捆绑在供应商捆绑包中。entrywebpack.config.js

使用 webpack 配置，例如：

let entries = {
  pack1: 'path/to/entry/point/pack1',
  pack2: 'path/to/entry/point/pack2'
};

export default {
  entry: { ...entries },
  module: {
    rules: [
      {
        // ... usual rule config props
        include: [
          '/path/to/pack1/src-for-rule',
          '/path/to/pack2/src-for-rule'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        chunks: Object.keys(entries),
        minChunks: (module) => {
            return /node_modules/.test(module.context);
        }
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
        chunks: Object.keys(entries),
        minChunks: Object.keys(entries).length
    })
  ]
}

如何将捆绑包组合成一个“应用程序”取决于您。

Answer 2

我在这里编写了一个示例存储库，展示了一种同时使用 lerna 和 webpack 的方法https://github.com/dan-kez/lerna-webpack-example

您可以在 README 中阅读更多内容，但在高层次上，此 repo 旨在展示以下内容：

• Monorepo 通过 lerna 进行代码拆分

• 跨包构建 Babel。

• 一个带有 webpack 配置的包，它依赖于 monorepo 中的包。

• 代码拆分和异步加载。

• 使用“外部”和代码拆分仅加载必要的代码

• TypeScript 和 Javascript 包的混合（显示过渡状态）