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

时间:2018-02-14 20:11:36

标签: reactjs npm webpack symlink create-react-app

我有一个使用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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

使用 alias 解决方案,该解决方案提供alias和多个src文件夹:。

根据文档,您可以为您的案例配置它,如下所示:

// config-overrides.js:

const {alias} = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias({
    "@admin": "admin/src",
    "%GLOBAL_STORE%": 'global/store',
    "%COMPONENTS%": 'src/components',
  })(config)
  return config
}

或使用configPaths()

tsconfig.json jsconfig.json 加载

因此您可以像上面的问题一样使用它:

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