Question

现在，我们正在将旧应用程序上的整体文件提取到多个较小的npm软件包中。

我们的webpack 4 + babel“构建引擎” npm软件包都正在构建主应用程序以及每个新的npm软件包，并将其移植到es5。

在其中一个软件包中，我们可能有一个简单的组件，例如：

// 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之类的有范围的软件包。然后，想法是将webpack配置为在使用的应用程序的node_modules/@companyScope内部而不是在每个程序包中构建所有程序包。

原因仅仅是为了解决问题（使用用户的应用程序中）的已编译/已编译软件包中的未知静态资产路径。

我宁愿避免这种情况，因为我相信应该编译每个软件包并将其编译到es5，但是在这种情况下，我能看到的唯一解决方案是使用copy-webpack-plugin显式配置它以复制文件从node_modules/packageA/assets到currentApp/src/assets。

问题在于，这些软件包将依赖于要导入和使用的webpack，而这并不是我想要的。

最后，我猜想url加载器并返回一个dataUrl而不是使用file-loader可以处理较小的图像，但是在生产中并不是很理想。另外，我不确定它是否可以用于其他静态资产，并且像这样插入它似乎有点“ hacky”。

在使用样式化组件之前，CSS一直是同样的问题，但是对于图像和其他静态资产，我真的看不到从中导入组件（包括图像和其他潜在静态资产）的好方法带有webpack 4的外部npm软件包。

真的希望这可以通过某种方式实现。

如何从Webpack 4的npm包中导入组件（包括图像）

0 个答案: