1

我正在发布一个使用一些对等依赖项的模块：

在我的 package.json 文件中，我声明了 peerDependencies：

...
"peerDependencies": {
  "react": ">=16",
  "react-dom": ">=16",
  "@material-ui/core": ">=4",
  "@material-ui/icons": ">=4"
},
...

在我的 webpack 配置中，我声明了 externals 以及输出格式commonjs2（我完全不确定为什么要使用commonjs2而不是commonjs）：

...
output: {
  filename: 'index.js',
  libraryTarget: 'commonjs2',
  path: path.join(__dirname, output),
},
externals: {
  react: 'react',
  'react-dom': 'react-dom',
  '@material-ui/core': '@material-ui/core',
  '@material-ui/icons': '@material-ui/icons',
},
...

这似乎有效，因为我可以看到输出文件中不包含外部。但是，在我的项目中包含这个包的输出会导致包的大小要大得多。

我认为这是因为捆绑包的输出将我的import语句转换为require语句，因此在我使用此包的项目中，require无法优化定义为语句的对等依赖项。

换句话说，包的输出，而不是将@material-ui/core库作为构建的一部分包含在内，而是将其引用为require('@material-ui/core')

那是对的吗？

打包对等依赖项的正确方法是什么，以便：

  1. 他们遵守 commonjs 模块格式（这是必要的）吗？
  2. 对等依赖项的间接导入仍然可以选择性吗？

我认为（但可能是错误的）目前正在发生的事情是：

// In my project where I consume the package
import { Thing } from '@org/package-name'

// And in @org/package-name` source code, I have
import { Card } from '@material-ui/core'

// Which gets transpiled to (more or less)
require('@material-ui/core').Card

// Which means that when I use "Thing", that I'm loading the whole of @material-ui/core

我也试过用babel-plugin-transform-imports. 但我发现我必须为每个导入配置对等依赖项/外部项（@material-ui/core/Card,@material-ui/core/List等）

4

1 回答 1

0

我发现，可行的解决方案是在预设环境的 babel 配置中将 targets.esmodules 设置为 true。

我认为这对我有用的原因是我在一个条目中重新导出了模块。并且commonjs格式的命名导出不能在导入时轻松隔离？

但这只是一个猜测。

于 2020-07-25T19:11:38.100 回答