动态请求构建的npm包资源

Question

关于构建 npm 包以及从另一个包动态请求一个包的资源的能力的问题。

假设我在 A 包中有一组图像，它还提供了 JS 逻辑来检索它们：

// In package B
import Component from 'pkg-a'

Component.getImage('foo')

我在 vite/webpack 中构建它，然后使用包 B。包 B 在“package.json”的依赖项部分中有包 A

默认情况下，构建工具只会将直接指定的图像链接到包 A 的 /dist 文件夹中

但我愿意：

1. 将所有图像放在 /dist 文件夹中 - 这可以通过多种方式实现，例如使用 /public 文件夹；
2. 包 A 的代码应该接受带有图像名称的参数，并动态地从其 dist 文件夹中返回正确的图像 - 不确定是否可能；

是否可以只从包 A 中请求一张图片，还是需要将 .es.js 中的所有内容打包到包 A 中？

Answer 1

我将按照以下步骤使其工作。我不太确定如何用

vite

来完成它，但让我与

webpack

分享我的方法。

1. 在包

   A

   中，我将创建一个函数（可能在主

   index.js

   中），它接受图像名称作为参数并返回相应的图像路径。它利用动态导入。

   export function getImage(name) {
      return import(`./images/${name}.png`);
   }
   

2. 在包

   webpack

   中配置

   A

   以将图像复制到dist文件夹中。

   // webpack.config.js for package A
   const CopyWebpackPlugin = require('copy-webpack-plugin');
   module.exports = {
     // Other configurations ...
     plugins: [
       new CopyWebpackPlugin([
         { from: 'src/images', to: 'images' },
       ]),
    ],
   };
   

   在包
B
3. 中，从包

   getImage

   导入

   A

   函数并使用它来请求图像（您可以根据您的框架或要求使用一个粗略的示例）

   
   import { getImage } from 'pkgA';
   
   async function loadComponent() {
     const imgSrc = await getImage('foo');
     const img = new Image();
     img.src = imgSrc.default;
     document.body.appendChild(img);
   }
   
   loadComponent();