如何在 NPM 包中使用 webpack 动态导入?

Posted

技术标签:

【中文标题】如何在 NPM 包中使用 webpack 动态导入?【英文标题】:How do I use webpack dynamic imports inside an NPM package? 【发布时间】:2019-12-21 02:38:40 【问题描述】:

我有一个导航栏 npm 包,我将它导入到其他项目中。它基于运行时从 Web 服务器加载的 JSON 配置文件动态导入 FontAwesome 图标。

当我构建 navbar 包时,整个 FontAwesome 库最终会在构建目录中以块的形式出现,正如我所期望的那样。

当我在另一个项目中导入该导航栏模块时,该项目的构建不包括 FontAwesome 块。所以动态导入 HTTP 调用会得到 404。

我在网上找不到太多关于这个用例的信息,可能是因为我不知道要查找的术语,也可能是因为这首先是一个糟糕的想法。

如何让 webpack 看到一个包有动态导入并将必要的块复制到构建目录?

【问题讨论】:

对我来说同样的问题...任何解决方案? 同样的问题 @John 有进展吗?我有同样的问题 我不记得我最后做了什么,但我想我从来没有想出这个具体的问题。 这可能是一个愚蠢的问题,但你有没有包含 font-awesome 作为依赖项? 【参考方案1】:

您可以尝试运行 npm publish --dry-run 以查看发布的内容以及与您的构建文件夹相比是否缺少任何内容。

您也可以尝试运行npm publish <path to build folder>

完整文档在这里:https://docs.npmjs.com/cli/v7/commands/npm-publish

【讨论】:

以上是关于如何在 NPM 包中使用 webpack 动态导入?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 webpack 从项目根目录导入外部文件?

如何使用 npm/webpack 正确导入 Gridstack?

用于将 vue 组件发布到 npm 包中的 Webpack 配置

在没有 npm install 或 webpack 的情况下导入 vuejs 组件

vue + webpack:动态组件导入是如何工作的?

无法使用 webpack 4 和 babel 7 导入 soap-npm 模块