reactjs - 如何在 ReactJs 中使用不同的文件进行不同的构建
问题描述
我正在尝试为具有相同代码库但样式更改很少的组件更改的不同站点构建 reactjs 应用程序(针对相同工作的不同站点的不同组件[同名])
当我构建应用程序传递参数说CLIENT = site1时,它应该从具有相应站点文件的公共文件中获取文件(css,组件等)并构建一个;如果 CLIENT=site2 那么它会为它的文件做。文件夹结构如下
node_modules
public
\--index.html
src
|--resource
| |--common
| | |--img
| | \--styles
| |--site1
| | |--img
| | \--styles
| \--Login.js
| \--site2
| |--img
| \--styles
| \--Login.js
|--App.js
\--index.js
package.json
我尝试使用customize-cra
但似乎没有运气。试图测试config-overrides.js
const path = require('path');
const { addWebpackAlias, override } = require('customize-cra')
const resolveApp = relativePath => path.resolve(__dirname, relativePath)
module.exports = override()(
addWebpackAlias({
'@': path.resolve(__dirname, './src/'),
"@a": path.resolve(__dirname, `./src/resource/${process.env.CLIENT}`),
}),
);
"scripts": {
"start:build1": "set CLIENT=site1 && react-app-rewired start",
},
只是为了测试 App.js
import './App.css';
import A from '@a/Login';
function App() {
return (
<div className="App">
sss
<Login/>
</div>
);
}
export default App;
但是给出错误之类的Module not found: Can't resolve '@app/Login' in
问题出在哪里。请指导
解决方案
推荐阅读
- java - maven中的System.out.println时线程中断标志被重置
- wagtail - 将 Wagtail 从 2.9.3 升级到 2.11 会破坏 wagtail 管理图标
- python - 气流计划防止立即执行
- r - 使用R中的imageMagick将白色矩形添加到图像底部
- azure - 当发布管道中的 devops 中的代理中的其他任务/作业失败时,如何仅在一个任务/作业中创建错误或通知
- vb.net - 如何在 VB .NET 应用程序中保存应用程序设置?
- c# - c# .netcore 获取amazon s3文件夹下所有文件的ImageURL
- javascript - 如何将复选框值(勾选或未勾选)放入 jquery / ajax 变量中?
- ruby-on-rails - 错误:没有为选项 '--port' Ruby on Rails 和 PostgreSQL 提供值
- javascript - 如何像在 Vue 中一样在 Alpine.JS 中添加显示过滤器?