如何在 React + Webpack 中安装和配置外部模块

Question

我在（Web）开发（Java、ASP.NET 和 PHP 等）方面拥有相当多的经验，并且对 React 和 Node JS 相当陌生。

虽然我做了多个教程并阅读了多篇文章，但我觉得我在这里和那里遗漏了一些要点。目前我正在开发一个 React 应用程序，它实现了我发现的一个很好的 HTML 模板。

我做过的一个 React 教程使用 Webpack 构建和部署应用程序（本地）。这很好用，可以使用 babel 转换 ES6 (.jsx) 和 SASS。到目前为止一切顺利:)

我的模板有一个图像滑块（Owl Carousel），所以我安装了 react-owl-carousel 模块。 这给我带来了 jQuery 的一些问题（也作为模块安装）。 经过几次尝试解决这个问题后，我决定继续使用另一个滑块模块，React Awesome 滑块。

我使用了 README.md 中解释的模块。但是在构建它（npm run build）时，我收到一个错误，即 react-awesome-slider 中的 .scss 文件无法被转译。类似“您是否缺少加载程序”之类的消息。

所以我安装了 sass、node-sass、sass-loader 等，并在我的 webpack.config.js 中配置了这些。 我还注意到 node-modules 中的 react-awesome-slider 模块包含一个 webpack.config.js。

到目前为止，很长的故事，对不起，现在是这个问题的本质。

以何种方式安装的模块（如 react-awesome-slider）可以被视为“黑匣子”？ 在构建主应用程序时构建所有模块并不合逻辑。 webpack.config.js 中的“排除：/node_modules/”配置可以防止这种情况，不是吗？

那么为什么 react-awesome-slider 会给出关于 .scss 转译的错误？那时我的 webpack 配置中没有 .scss 规则。

安装新模块时会自动安装所有依赖模块吗？那么当我运行“npm i react-awesome-slider --save-dev”时，它的依赖项也会被安装吗？或者这不是必需的吗？安装新模块后是否需要更新（webpack）配置？还是真的是黑匣子，“自成一体”？

任何帮助将不胜感激！！！也许 Github 上有一个很好的 react-webpack 示例应用程序或类似的东西？

Answer 1

这也让我困惑了很长时间。以下是您问题的一些答案。

1. 人们将包发布到NPM，因此您的项目所依赖的模块 可以预先构建或源代码，这取决于。我检查了react-awesome-slider，它的package.json 中的main 字段是dist/index.js，直接导入它不会导致问题，因为没有SCSS 文件。如果你按照CSS 模块使用说明，你有导入@987654327 @你会发现src/styles.js文件导入../styled.scss，所以webpack会用你没有配置的SCSS loader加载它，这就是发生错误的原因。

2. 当你安装模块时，npm 会运行 通过它的依赖树，安装它的依赖，依赖' 依赖项，直到不再需要安装依赖项模块。 npm 3.0之前node_module文件夹是树形结构，反映了依赖树，但是会导致很多模块都依赖同一个依赖的问题，npm会下载保存太多相同的文件，3.0之后就变平了(release note here,搜索@ 987654330@关键字）。

3. 你不需要在安装依赖后更新你的 webpack 配置，因为 webpack 构建过程将使用文件依赖树来处理它。您已经安装了一个包并将其导入到您的激活码中，文件将有句柄（以其 package.json 主字段文件作为条目），您安装了一个包但未使用它或将其导入死文件（死文件意味着你无法从 webpack 入口文件中找到它），它将被 webpack 忽略，因为它是死代码。

在我阅读 npm 文档之前，我有太多的困惑。祝你好运。

Answer 2

Node 模块是为执行包而构建的。当它们被编译时，它们具有适当的配置来处理在其中导入的扩展，并且当您在主应用程序中导入类似 .scss 的内容时，它不知道该扩展然后您的webpack 需要规则来包含该扩展。
它确实排除了 node_modules，因为它们是预先转换的 pr pre build。
更多的 webpack 有点难，所以开发者创建 CRA 看看它。