Webpack 4: Как настроить разделение кода для библиотеки, экспортирующей отдельные модули (сродни Lodash или Office Fabric UI)

Question

В настоящее время у меня есть большая частная библиотека NPM, которая используется приложениями нескольких других команд по всему бизнесу. На данный момент библиотека публикуется как один большой файл (например, основной файл lodash), но это приводит к раздутому размеру пакета приложений, поскольку некоторым приложениям не требуется большой кусок того, что находится в библиотеке.

Итак, в данный момент приложения импортируют что-то вроде этого

import { SomeReactComponent, someHelperFunction } from 'my-private-library';

Чего я хочу добиться, так это библиотеки, изданной с отдельными модулями, похожими на то, как Lodash, так что вышеприведенное станет:

import SomeReactComponent from 'my-private-library/lib/SomeReactComponent';
import someHelperFunction from 'my-private-library/lib/someHelperFunction';

Я могу заставить Webpack выводить библиотеку в этом формате, используя несколько точек входа, но я не могу заставить Webpack разделять общие зависимости каждого из этих модулей. Скажем, файлы выглядят примерно так:

ЦСИ / SomeReactComponent.jsx

import React from 'react'

import SOME_CONST_STRING from '../constants';

const SomeReactComponent = () => {
  return (
    <div>You are using {SOME_CONST_STRING}</div>
  );
}

export default SomeReactComponent;

ЦСИ / someHelperFunction

import SOME_CONST_STRING from '../constants';

export default function someHelperFunction() {
  return `This is just an example of ${SOME_CONST_STRING}`;
}

Мой Webpack выводит отдельные файлы, но не разделяет общий код таким образом, чтобы приложение могло использовать библиотеку. Так что обратите внимание на SOME_CONST_STRING, который импортируется в каждый из модулей, Webpack помещает этот код в оба экспортируемых файла.

Мой конфиг Webpack выглядит примерно так ( убрал другие настройки для краткости )

module.exports = {
  entry: {
    SomeReactComponent: './src/SomeReactComponent',
    someHelperFunction: './src/someHelperFunction',
  },
  output: {
    path: './lib',
    library: 'MyPrivateLibrary'
    libraryTarget: 'umd',
    filename: '[name].js'
  }
  // removed other setting for brevity
}

Я пытался использовать настройку оптимизации splitChunks, как это

module.exports = {
  entry: {
    SomeReactComponent: './src/SomeReactComponent',
    someHelperFunction: './src/someHelperFunction',
  },
  output: {
    path: './lib',
    library: 'MyPrivateLibrary'
    libraryTarget: 'umd',
    filename: '[name].js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  // removed other setting for brevity
}

, который выполняет фрагмент кода, но когда я пытаюсь использовать библиотеку в приложении после этого, я получаю ошибки в соответствии с (ERROR in TypeError: __webpack_require__(...) is not a function).

Мой вопрос: кто-нибудь может увидеть, что я делаю не так? То, чего я пытаюсь добиться, возможно даже с помощью Webpack? Есть ли какой-нибудь пример (как я не могу найти) о том, как это сделать?

Извините за пример кода, так как моя библиотека закрыта, я не могу использовать примеры реального кода.

Answer 1

Удалось ли вам достичь того, чего вы пытались достичь в приведенном выше сценарии.Я работаю над тем же вариантом использования и столкнулся с похожей проблемой.После диагностики я обнаружил, что когда мы определяем библиотеку, то в веб-пакете разобранного модуля добавляем это в этот объект как window.myWebpackJsonpMyPrivateLibrary в минимизированном основном чанке, который не определен.если вы удалите library и libraryTarget из веб-пакета, с этой проблемой вы не столкнетесь.

В моем случае я столкнулся с другой проблемой, которая заключается в том, что требуемые блоки не загружаются, когда это используется в качестве зависимости установки в другом проекте.