代码之家 › 专栏 › 技术社区 › Markus Meskanen

使用不同的CSS和图像创建多个构建?

build webpack reactjs javascript

Markus Meskanen · 技术社区 · 6 年前

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

我用过 create-react-app 为了初始化我的项目,我很想构建我的项目结构,这样我就有一个 common 常见CSS/images的目录,然后是每个构建的自定义目录,大致如下:

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

我该如何做到这一点,a)最终构建只包括用于该构建的文件,b)我不必担心代码中的所有当前构建。

0 回复 | 直到 6 年前

chonnychu 6 年前

有三件事必须做。

导入路径

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

我会用 customize-cra 和 react-app-rewired 重写webpack配置以配置不同的导入路径并不取决于不同的客户端。

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

config-overides.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 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。客户 是 build1 ,“@/img/logo.svg”将引用 resource/build1/img/logo.svg ,反之亦然

发展

您可以在您的 package.json 以不同的方式启动不同的客户端 process.env。客户

{
  "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",
  }
}

我不确定这是否是你想要的,如果你有任何问题,请告诉我,谢谢!