时间戳

首页 > 解决方案 > 使用不同的 CSS 和图像创建多个构建？

javascript - 使用不同的 CSS 和图像创建多个构建？

问题描述

我正在设计一个 React 应用程序，它需要有多个使用不同样式和图像的不同构建，例如header.png不同部署的应用程序之间不同的图像。

我已经使用create-react-app来初始化我的项目，并且我很想构建我的项目，以便我有一个common用于常见 CSS/图像的目录，然后为每个构建提供一个自定义目录，类似于以下内容：

node_modules
public
  \--index.html
src
  |--resource
  |    |--common
  |    |    |--img
  |    |    \--styles
  |    |--build1
  |    |    |--img
  |    |    \--styles
  |    \--build2
  |         |--img
  |         \--styles
  |--App.js
  \--index.js
package.json

我将如何做到这一点：a）最终构建将只包含用于该构建的文件，b）我不必担心代码中任何地方的当前构建。

标签： javascriptreactjswebpackbuild

解决方案

有三件事要做。

导入路径

我假设您在 img 文件夹中的图像文件，例如 jpg、png、SVG 将被导入到组件中。

我将使用customize-cra和react-app- rewired 来覆盖 webpack 配置来配置不同的导入路径，这取决于不同的客户端。

首先您必须安装它们，然后您可以在项目根目录中创建一个名为的文件config-overrides.js，并在 config-overrides 中为您的资源设置别名路径，例如 CSS、SVG 图标。

配置覆盖.js

const path = require('path');
const { addWebpackAlias, override } = require('customize-cra')

const resolveApp = relativePath => path.resolve(__dirname, relativePath)

module.exports.configOverrides = {
  webpack: override(
    addWebpackAlias({
      'common': resolveApp('src/resource/common'),
      '@': resolveApp(`src/resource/${process.env.CLIENT}`)
    })
  ),
}

process.env.CLIENT是你的客户端名，它会对应你的文件夹名如build1，build2， setup 后webpack alias，你不用担心导入路径，你可以只使用一个代码。

在你的组件中，你可以这样写

import Layout from 'components/Layout';
import { ReactComponent as IconUser } from 'common/img/icon-user.svg';
import styles from '@/styles/header.css';
import { ReactComponent as Logo } from '@/img/logo.svg';
import HeaderImg from '@/img/header.jpg';

function App() {
  return (
    <Layout>
      <div className={styles.header}>
        <img src={HeaderImg>
        <Logo />
        <div>{user.name}</div>
      </div>
    </Layout>
  )
}

如果你process.env.CLIENT是build1'@/img/logo.svg' 将引用resource/build1/img/logo.svg，反之亦然

发展

您可以在您的设置不同的启动 cmdpackage.json以启动不同的客户端process.env.CLIENT

{
  "scripts": {
    "start:build1": "process.env.CLIENT=build1 npm run start",
    "start:build2": "process.env.CLIENT=build2 npm run start",
  }
}

生产建设

在构建过程完成后，编写一个命令，将构建文件夹内容复制到每个客户端的文件夹中，这样不同客户端构建的代码不会相互覆盖。

{
  "scripts": {
    "build:build1": "process.env.CLIENT=build1 npm run build && mv build build1",
    "build:build2": "process.env.CLIENT=build2 npm run build && mv build build2",
  }
}

我不确定这是否是您想要的，如果您有任何问题，请告诉我，谢谢！

推荐阅读