使用 webpack 作为 React npm 包的构建工具答案

【问题标题】：Using webpack as build tool for React npm package使用 webpack 作为 React npm 包的构建工具
【发布时间】：2018-04-24 15:24:57
【问题描述】：

我一直在玩 webpack 和 npm 注册表。我创建了我的 own little project.，并将其发布到 npm 注册表。一切似乎都很好，但有一件事让我担心。

由 webpack (lib/index.js) 构建的文件包含近 2k 行代码，而我的库非常小。我看到它包含我使用的两个依赖项，它们是 prop-types 和 detect-browser。他们编写了大部分代码。将鼠标悬停在下载这两个库并在测试项目中使用它们之后，我希望它们会通过摇树或类似的方式以某种方式进行重复数据删除，但我的包的大小仍然相同。

基本上，我要问的是：我的库是否包含不必要的代码？在我看来是这样。

我还尝试在测试项目中额外安装prop-types 和detect-browser 以查看捆绑包大小是否保持不变。但是我的库的大小仍然相同，并且捆绑包的大小增加了（我预计会删除多余的库之类的）。

【问题讨论】：

标签： node.js reactjs npm webpack build

【解决方案1】：

你是如何生成依赖图的？

顺便说一句，你的包看起来不错，除了你在分布式代码中包含你所依赖的包（prop-types 和detect-browser）。

为了避免你应该在你的 webpack 配置文件中将这些库标记为external。喜欢：

externals: {
    react: 'react',
    prop-types: 'prop-types',
    detect-browser: 'detect-browser',
}

最后（个人）说明：尝试使用Rollup 捆绑您的库。 :)

【讨论】：

我使用 webpack-bundle-analyzer 作为依赖图。为什么像react-bootstrap 这样的库只有react 和react-dom 标记为外部？ ReactBootstrap 也使用prop-types 和其他库作为它们的依赖项。顺便说一句，您的 sn-p 无效；）
react-bootstrap 有一个相当复杂的build setup。我不知道那里发生了什么！