Как правильно использовать lerna и webpack при работе с монорепо

Question

Я создаю монорепо, которое будет содержать все отдельные компоненты набора UI, созданного с помощью React.

Я использую lerna, потому что у меня нет опыта работы с конфигурацией monorepo / multi пакетов, теперь у меня есть такая структура:

index.js
packages/
  pack1/
  pack2/

Я хочу построить каждый пакет с webpack но хочу использовать только один webpack.config.js в корневой папке и одной командой для создания pack*.dist.js в каждом каталоге пакета.

Является ли это возможным? Любое направление?

Answer 1

Вопрос довольно общий, открытый, но это только начало.

Я хочу собрать каждый пакет с помощью веб-пакета, но хочу использовать только один файл webpack.config.js в корневой папке и одну команду для создания пакета *.dist.js в каждом каталоге пакета.

Является ли это возможным? Любое направление?

Да, это возможно. Вам нужно перечислить pack1 а также pack2 как entry в вашем webpack.config.js файл. Вы, вероятно, хотите объединить все общие сторонние и внутренние зависимости в комплекте поставщика.

С конфигурацией веб-пакета, такой как:

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, но на высоком уровне это репо стремится продемонстрировать следующее:

• Разделение кода Monorepo с помощью lerna

• Вавилонское строительство из пакетов.

• Пакет с конфигурацией webpack, который зависит от пакетов в файле monorepo.

• Разделение кода и асинхронная загрузка.

• Использование "внешнего" и разделения кода только для загрузки необходимого кода

• Смесь пакетов TypeScript и Javascript (для отображения переходного состояния)