Блог

Я работаю в проекте, в котором мы создаем веб-приложение react, которое также упаковывается в приложение для Android и ios через webview. Это приложение будет отправлено разным клиентам, которые получат свой собственный бренд.

Существуют ли какие-либо рекомендации по реализации этого без увеличения времени сборки?

В данный момент мы импортируем определенную тему в один из файлов машинописи, а затем используем скрипт python для редактирования инструкции импорта и запуска npm run build для каждой темы, что приводит к очень длительному времени сборки, так как каждая сборка для темы выполняется около 50 секунд.

Я мог бы сократить время сборки, используя Poi, где каждая сборка после первой занимает всего около 20 секунд, но мне было интересно, есть ли для этого какие-либо другие решения.

Каждая тема состоит из файла .scss и .ts, а также некоторых изображений с логотипами и т.д. Файл .ts импортируется в theme.ts файл следующим образом

 // this import is edited by the python script for each build
import { getSpecificTheme } from './themeFoo'
// central point for importing the theme in the rest of the application
export const theme = () => getSpecificTheme() 
 

 // themeFoo.ts
import './themeFoo.scss' // images for the brand are referenced in here
import { Theme } from '../../theme/theme'
export const getSpecificTheme = ():Theme => {
  return {
    // return some theme dependent variables
  }
}
 

Еще одна идея состояла в том, чтобы создать проект только один раз, а затем заменить импорт и изображения, поскольку все изображения имеют одинаковые имена. Но это трудно реализовать из-за процесса связывания webpack.

У кого-нибудь есть более элегантное решение для такого рода проблем?