Первое улучшение, предложенное и внедрённое участником сообщества Github. Ваш вклад в этот открытый проект помогает другим разработчикам создавать удивительные вещи, спасибо за это!
Хитрость заключается в более тонкой настройке тандема TypeScrtipt и Rollup, приводящего итоговый код к формату, который понимает движок правил wb-rules на контроллере Wirenboard.
Если вы пропустили прошлый выпуск, в нём подробно рассказывалось об использовании переменных окружения dotenv:
Новые установки открывают возможность для проведения дальнейших оптимизаций, что уже сказалось на ветке проекта latest, получившей значительно переработанную конфигурацию ESLint.
В существующих примерах и тех, что готовятся для статьи о программировании правил wb-rules с применением реальных устройств, проблем пока не возникло.
Изменения в файлах проекта
Корректировка конфигурации TypeScript
В корне проекта найдём файл tsconfig.json и перенастроим работу компилятора TypeScript:
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"outDir": "./dist",
"paths": {
"@wbm*": ["./src/wb-rules-modules*"]
},
"allowJs": true,
"strictNullChecks": true,
"skipLibCheck": true,
"esModuleInterop": true,
"alwaysStrict": true,
},
Теперь TypeScript будет компилировать код в формат «почти ECMAScript 5» - остальное доделает Rollup. Чтобы не запутать систему юнит-тестов, в файле конфигурации tests/tsconfig.json добавим в секцию compilerOptions строчку
"moduleResolution": "NodeNext"
Корректировка wb-replacer
Поскольку TypeScript выдаёт код в формате ES5, потребуется поменять регулярное выражение в файле tsc-replacers/wb-replacer.js - если раньше использовались конструкции import, то теперь это require и там немного другой принцип:
exports.default = function moduleReplacer({ orig }) {
return orig
// Случай импорта в правилах
.replace('../wb-rules-modules/', '')
// Случай импорта в модулях правил
.replace('\'./', '\'')
// Удаление расширения, появляющегося в процессе работы Rollup
.replace('.js\'', '\'');
}
В качестве стоп-символа теперь служит одинарная кавычка, без привязок к началу или концу строки.
Также здесь исправляется баг, связанный с разрешением путей при импорте одних модулей в другие (понадобится в следующих выпусках).
🟥 Внимание! Применимо только к проекту на Rollup. Для корректной работы в варианте Rollup+Babel, потребуется установить в конфигурации сборщика модулей опцию output.format в значение "cjs".
Соответствующее исправление уже внесено в ветку babel-stable:
Корректировка списка зависимостей
Откроем терминал VSCode и выполним пару команд:
yarn remove @babel/cli @babel/core @babel/preset-env tsc-alias
yarn add --dev rollup-plugin-tsc-alias
Здесь удаляется всё, что относится к Babel, а также меняется принцип работы с утилитой tsc-alias - она будет подключена в проект в виде плагина для Rollup, что позже позволит убрать этап post-build при выполнении сборки.
Дополнительно, удалим файл babel.config.json - нет Babel, нет и его настроек.
Корректировка конфигурации Rollup
Откроем файл rollup.config.mjs и первым делом внесём в список импорта строчку, которая подключает плагин tsc-alias:
import tscAlias from 'rollup-plugin-tsc-alias'
Затем перейдём в экспортируемый объект конфигурации, где добавим в перечень плагинов вызов tscAlias(), расположив его после вызова typescript().
Также потребуется заменить один вызов del(...) на два других:
plugins: [
multi({ preserveModules: true }),
typescript(),
tscAlias(),
dotenv({ prefix: '^APP_' }),
del({ targets: 'dist/*', hook: 'buildStart' }),
del({ targets: 'dist/_virtual', hook: 'closeBundle' })
]
Первый del чистит папку dist перед сборкой, а второй удаляет из неё лишние элементы после того, как сборка завершилась.
Финальным штрихом отредактируем секцию output:
output: {
format: 'cjs',
dir: 'dist',
preserveModules: true
}
Значение cjs опции format - это именно то изменение, которое доводит код до нужной контроллеру Wirenboard кондиции.
Удаление лишних этапов сборки
Перейдя в файл package.json, удалим из секции scripts команды postbuild и postbuild:dev - они больше не нужны, всё встроено в Rollup.
Итоговая проверка
После всех правок, в терминале VSCode выполним команду build или build:dev - всё должно собраться без ошибок.