我有一个使用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
答案 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()
因此您可以像上面的问题一样使用它:
import { AddIcon, Spinner } from '%COMPONENTS%/Icons'