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

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

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

index.js
packages/
  pack1/
  pack2/

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

Является ли это возможным? В каком направлении?


webpack javascript lerna
person ciaoben    schedule 16.10.2017    source источник

Ответы (2)


arrow_upward
9
arrow_downward

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

Я хочу собрать каждый пакет с помощью webpack, но хочу использовать только один файл 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
    })
  ]
}

Как вы сплетите связки в «приложение», зависит от вас.

person Morgan    schedule 19.10.2017
comment
как бы вы определили объем выпуска для каждой пачки? - person Nutan; 09.02.2021

arrow_upward
1
arrow_downward

Я написал пример репозитория, демонстрирующий метод совместного использования lerna и webpack здесь https://github.com/dan-kez/lerna-webpack-example.

Вы можете прочитать больше в README, но на высоком уровне это репо стремится продемонстрировать следующее:

  • Разделение кода Monorepo через lerna

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

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

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

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

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

person dankez    schedule 16.01.2020
comment
ОП просил a single webpack.config.js in the root folder and a single command to create a pack*.dist.js in every package directory. Поскольку в вашем примере этого не происходит, может быть, вы можете немного расширить это? - person Domi; 01.04.2020