Как импортировать компонент (включая изображение) из пакета npm в Webpack 4 - PullRequest
Новая
       10

Как импортировать компонент (включая изображение) из пакета npm в Webpack 4

0 голосов
/ 24 сентября 2018

В данный момент мы находимся в процессе извлечения нашего монолита из старого приложения в несколько меньших пакетов npm.

Как основное приложение, так и каждый новый пакет npm собираются и переносятся вes5 от нашего веб-пакета 4 + babel «build engine» npm package.

В одном из пакетов у нас может быть простой компонент, такой как: 

// c:\my-component-with-image-lib\src\index.js
import myImg from './my-img.jpg'

export const MyComponentWithImage = () => {
  return {
    <div>
      <p>A simple react component with an image</p>
      <img src={myImg}/>
    </div>
  }
};

, который прекрасно работает, если мызапускать пакет только сам с npx start.

Но если мы сделаем npx build для каждого из пакетов, мы получим папку dist и папку assets/images, что тоже хорошо.

Проблема в том, что из основного приложения, когда мы импортируем только что созданные пакеты, не будет отображаться ни один из изображений / статических ресурсов, поскольку основное приложение не будет искать в каждом node_modules / package-name дляактивы.

// c:\consumer-application\src\App.jsx
import  { MyComponentWithImage } from 'my-component-with-image-lib'

export const App = () => {
  return {
    <div>
      <p>The image in MyComponentWithImage will result in a 404</p>
      <MyComponentWithImage />
    </div>
  }
};

Таким образом, хотя он работает на сервере dev при запуске каждого пакета, он не будет работать, если пакеты импортирует другое приложение, поскольку он знает только свою собственную папку ресурсов, а не пакеты из папки node_modules.

Из-за этой проблемы люди на работе начали говорить не о том, чтобы сначала собирать модули для es5, а напрямую импортировать их, а затем создавать пакеты с определенными областями, такие как node_modules/@companyScope/packageA-Z.Идея состоит в том, чтобы затем настроить веб-пакет для сборки всего пакета внутри node_modules/@companyScope из приложения-потребителя, а не в каждом пакете.

Причина заключается в том, чтобы просто решить проблему с (из приложения-потребителя) неизвестным статическимпуть к ресурсам в переданных / собранных пакетах.

Я бы предпочел этого избежать, поскольку я считаю, что каждый пакет должен быть собран и перенесен в es5, но единственное решение, которое я вижу в этом случае, - это использование копии.-webpack-plugin для явной настройки для копирования файлов из node_modules/packageA/assets в currentApp/src/assets.

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

Наконец, я предполагаю, что url-загрузчик и возвращение dataUrl вместо использования file-загрузчика будет работать для небольших изображений, но на самом деле не будет идеальным в работе.Кроме того, я не уверен, что это сработает для других статических ресурсов, и встраивание в него выглядит так, как будто это выглядит немного «хакерски».

Раньше такая же проблема была с CSS, пока styled-компоненты не пришли на помощьНо для изображений и других статических ресурсов я не могу действительно найти отличный способ импортировать Компоненты (включая изображения и, возможно, другие статические активы) из внешних пакетов npm с помощью веб-пакета 4.

Действительно надеюсь, что это как-то возможно.

...