在嵌套的 React.js 应用程序之间共享组件

Question

我有一个使用 create-react-app 引导的 React.js 应用程序，该应用程序嵌套在另一个以相同方式引导的 React.js 应用程序中，项目目录如下所示：

.
+-- admin
|   +-- node_modules
|   +-- public
|   +-- src
|       +-- pages
|       |   +-- MyFavoriteIconsInTheWorld.js
|       +-- styles
|       +-- App.js
|       +-- Index.js
|       +-- package.json
+-- ansible
+-- bin
+-- node_modules
+-- public
+-- src
|   +-- pages
|   +-- components
|   |   +-- Icons
|   +-- styles
|   +-- App.js
|   +-- Index.js
|   +-- package.json
+-- config
|   +-- jest
|   +-- webpack
|       +-- webpack.admin.dev.js
|       +-- webpack.admin.prod.js
|       +-- webpack.config.dev.js
|       +-- webpack.config.dev.js

主 React.js 应用程序内的 Icons 文件夹有几个组件，我需要在 admin/src/pages/MyFavoriteIconsInTheWorld.js 中使用导入 我尝试通过将此别名添加到我的 webpack.admin.dev.js 来做到这一点：

    alias: {
        "%GLOBAL_STORE%": path.resolve(paths.appSrc, './global/store'),
        "%COMPONENTS%": path.resolve(__dirname, '../../src/components'),
    },

然后将其添加到 MyFavoriteIconsInTheWorld.js：

    import { AddIcon, Spinner } from '%COMPONENTS%/Icons';

但我得到了这个错误：

Failed to compile.

./admin/src/pages/PromosMyFavoriteIconsInTheWorld.js
Module not found: You attempted to import 
/Users/sclancy/dev/companyNameHere/src/components/Icons which falls 
outside of the project src/ directory. Relative imports outside of src/ 
are not supported. You can either move it inside src/, or add a symlink 
to it from project's node_modules/.

这就是问题所在，我不能move it inside src/，而且我不确定在这种情况下如何添加符号链接。访问这些组件的最佳方式是什么？有没有办法在不制作 NPM 包的情况下做到这一点？有我可以使用的 webpack 配置吗？

https://github.com/facebook/create-react-app/issues/1492#issuecomment-358170489

Answer 1

craco 或 rewired create-react-app 的别名解决方案是 react-app-alias，系统为：craco、react-app-rewired、customize-cra p>

根据上述系统的文档，将 package.json 中的 react-scripts 替换为 craco 并进行下一步配置：

// craco.config.js
const {CracoAliasPlugin} = require('react-app-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {}
    }
  ]
}

像这样在 json 中配置别名：

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

并将此文件添加到主要 typescript 配置文件的 extends 部分：

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  // ...
}

Answer 2

关于在 Webpack 中创建符号链接： Symlinks in Github Issues (Webpack)

至于访问原始 webpack，我会尽快将其弹出... Create React App 可以帮助您构建基础知识，但无法修改 webpack 总是很痛苦。