首页 > 解决方案 > 如何在 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

问题出在哪里。请指导

标签: reactjsreact-nativereact-reduxreact-router

解决方案


推荐阅读