Skip to content

build.md

Latest commit

 

History

History
85 lines (66 loc) · 3.26 KB

build.md

File metadata and controls

85 lines (66 loc) · 3.26 KB
Raw

Как собрать приложение на React для 1С:

  • вводим команду
npm create vite@latest
  • указываем название проекта – test1c;
  • выбираем, какой фреймворк будем использовать – в данном случае, React;
  • указываем конфигурацию языка, на котором мы будем писать – TypeSctipt + SWC;
  • подтягиваем все зависимости этого приложения, выполнив в его каталоге команду
npm install

Запускаем dev-сервер

npm run dev

Открыть наше приложение можем по адресу http://localhost:5173

Для того, чтобы собрать весь результат в один файл, нам нужно поставить дополнительный плагин – vite-plugin-singlefile

npm install vite-plugin-singlefile --save-dev

После этого нам нужно будет импортировать этот плагин в настройках компиляции Vite (в файле vite.config.ts), добавив строку:

import { viteSingleFile } from ‘vite-plugin-singlefile’

И указать этот плагин в списке плагинов наравне с плагином React:

export default defineConfig({
    plugins: [
        react(),
        viteSingleFile()
    ],
})

После этого, выполняя команду сборки

npm run build

Получим в dist наш заветный единый HTML-файл.

Теперь нужно его понизить до версии, которая будет работать в WebKit для Windows. Для этого в настройках компиляции Vite (в файле vite.config.ts) нужно в качестве таргета сборки указать более старую версию JavaScript (es2018), добавив строки:

build: {
    target: "es2018"
}

И то же самое нужно сделать в самом TypeScript, добавив в tsconfig.app.json следующие параметры сборки:

{
    "compilerOptions": {
        "target": "ES2018",
        "useDefineForClassFields": true,
        "lib": ["ES2018", "DOM", "DOM.Iterable"],
        "module": "ES2015",
        "skipLibCheck": true,
…

Обратите внимание, что для параметра module тоже нужно отдельно указать систему загрузки – не современную, а более старую, 2015 года.

Таким образом в результате команды

npm run build

Будет собрано правильно настроенное одностраничное React-приложение. Его можно загрузить в макет двоичных данных и начать использовать.

Демонстрация: demo