如何在 Create React App 中导入 `src` 目录之外的模块而不弹出？

克服 Create-React-App 中 src 目录之外的导入限制

Create-React-App (CRA) 强制执行严格的导入规则，防止模块在 src 目录之外导入。从其他目录（例如公共文件夹）访问文件时，此限制会导致错误。

了解 ModuleScopePlugin

CRA 中的 ModuleScopePlugin 插件可确保应用源代码导入保持不变限制在 src 文件夹内。该插件可防止外部模块访问，确保一个封闭且安全的应用程序环境。

非弹出解决方案

官方，绕过此限制需要从 CRA“弹出”，允许直接访问底层 webpack 配置的进程。但是，弹出会带来无法访问未来 CRA 功能和更新的风险。

不要弹出，请考虑以下非官方解决方案：

• 重新接线： 使用rewire 包动态修改 webpack 配置。虽然这允许在 src 之外访问模块，但不建议这样做，因为它会削弱插件保护。
• react-app-alias: 该库创建了额外的类似 src 的目录，这些目录也包含在ModuleScopePlugin。这在保持安全性的同时增加了灵活性。

避免从公共文件夹导入

从公共文件夹导入资源效率低下，因为它们会在构建中重复文件夹。相反，将资源存储在 src 中以优化包大小和加载效率。

以上是如何在 Create React App 中导入 `src` 目录之外的模块而不弹出？的详细内容。更多信息请关注PHP中文网其他相关文章！