Создать несколько сборок с разными CSS и изображениями? - PullRequest
Новая
       24

Создать несколько сборок с разными CSS и изображениями?

0 голосов
/ 16 июня 2020

Я разрабатываю приложение 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

Как бы мне это сделать, чтобы а) окончательная сборка включала только файлы, предназначенные для этой сборки, и б) мне не пришлось бы беспокоиться о текущей сборке повсюду в коде.

1 Ответ

1 голос
/ 17 июня 2020

Необходимо сделать три вещи.

Путь для импорта

Я предполагаю, что ваши файлы изображений в папке img, такие как jpg, png, SVG, будут импортированы в компонент.

Я буду использовать customize-cra и react-app-rewired , чтобы переопределить конфигурацию webpack для настройки разных путей импорта, не зависящих от разных клиентов.

Сначала у вас есть чтобы установить их, вы можете создать файл с именем config-overrides.js в своем проекте root и установить путь псевдонима для вашего ресурса, например CSS, значок SVG в config-overrides.

config-overrides . 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.CLIENT равен build1, '@ / img / lo go .svg 'будет ссылаться на resource/build1/img/logo.svg, и наоборот

Development

вы можете установить p другой start cmd в вашем package.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",
  }
}

Я не уверен, что это то, что вы хотите, если у вас возникнут проблемы, пожалуйста дайте мне знать, спасибо!

...