导出由 webpack 构建的模块

Exporting a module built by webpack

本文关键字：模块 构建 webpack      更新时间：2023-09-26

我正在编写 3 个模块作为 npm 模块发布

  • 管理员（有核心有依赖关系）
  • 成员（具有核心具有依赖项）
  • 核心

核心中的 package.json：

{
...
"main":"dist/bundle.js"
}

核心在管理中的用法： 

import core from "core"

所有模块都是由 webpack 构建的。

问题是，如果我使用 webpack 来构建Core，生成bundle.js，并且有Admin导入bundle.js那么大量的库将被复制。

例如角度、引导等。

我现在正在做的是导入src/index.js的入口文件admin

核心中的 package.json：

{
...
"main":"src/index.js"
}

核心在管理中的用法： 

import core from "core"

但是 webpack 无法正确解析core中的某些依赖项，例如，我在core模块中设置了多个根webpack.config.js，以便可以进行一些简短的导入。 

root: [
      path.resolve(__dirname, './src/'),
      path.resolve(__dirname, './src/directives')
]
// instead of relative path
import "../../myDirective.js" 
// I can use 
import "myDirective.js"; // where myDirective.js is under "src/directives/myDirective.js", but this fails when I try to build `admin` module.

有没有更简单的方法来让 webpack 构建 npm 模块，以便于导入？

Core: depends on angular, bootstrap, core.js
Admin: depends on angular, bootstrap, admin.js, includes core as a module

这对我来说也很有趣。我建议可以通过设置 webpack 的库选项来完成。

相关文章：