Создание автономных артефактов js с использованием Vite в качестве побочного эффекта другой сборки
Я использую Vite ([email protected]) для создания артефактов Typescript для «сайта» SPA с использованием SolidJS ([email protected]).
вот мой vite.config.ts
import { defineConfig, resolveBaseUrl } from 'vite'
import solidPlugin from 'vite-plugin-solid'
export default defineConfig({
plugins: [solidPlugin()],
server: {
port: 3000,
},
build: {
target: 'esnext',
outDir: '../htdocs',
rollupOptions: {
input: {
index: "./index.html",
dev: "./dev.html",
test: "./test.ts",
},
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`
}
},
},
});
В настоящее время он фактически создает 2 html-файла (index.html и dev.html) и артефакты, необходимые для запуска этих файлов. Это здорово. Не может быть счастливее.
Я хотел бы, чтобы транспилятор также отключал test.js, чтобы я мог запустить его для проверки работоспособности перед развертыванием в рабочей среде.
Я надеюсь сделать vite build, а затем запустить node ../htdocs/assets/test.js (или что-то подобное), и он заблокирует окончательное развертывание, если какие-либо мои тесты на работоспособность не пройдут.
однако, когда я пытаюсь это сделать, я получаю сообщение об ошибке при запуске test.js, жалуясь на использование мной операторов импорта.
Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
установка моего типа пакета на модуль в package.json не исправляет это. изменение тестового файла на test.mjs не исправляет это. Я не совсем уверен, что попробовать дальше.
Чего бы я действительно хотел, так это сделать весь «импорт» как часть транспиляции и создать один автономный test.js, который просто запускается. Кажется, это то, что он делает, когда создает index.html и dev.html, почему он не делает этого для моего файла ts?
Ответы 2
Это должно сработать. Я только что попытался создать новый репозиторий с вашими vite.config.ts, однострочными index.html, dev.html и test.ts файлами и установленными vite, vite-plugin-solid, solid-js. В итоге получил ../htdocs/assets/test.js файл.
Вам также может быть интересно проверить Vitest, который упрощает выполнение подобных тестов и не попадет случайно в ваши развернутые htdocs.
Я изучу Vitest, потому что он выглядит интересно, но выбор тестовых фреймворков делать не мне, я должен передать это решение организации, что займет время. Мое намерение здесь состоит в том, чтобы иметь независимые тесты для основных вещей, не привязываясь к фреймворку. Все, что мне действительно нужно, — это вывод js, который разрешит и завершит свои собственные зависимости, чтобы я мог его запустить.
Лучшим решением, которое я смог найти, было создание отдельного конфигурационного файла для сборки тестов.
import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'
export default defineConfig({
plugins: [solidPlugin()],
server: {
port: 3000,
},
build: {
target: 'esnext',
outDir: '../htdocs',
lib: {
entry: "./test-runner.ts",
name: "test-runner",
fileName: "test-runner"
},
rollupOptions: {
},
},
});
а затем обновите мой package.json, чтобы мой тестовый скрипт скомпилировался и запустил вывод из этой альтернативной конфигурации vite.
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "vite build --config vite.config-tests.ts && node ../htdocs/test-runner.umd.js"
},
Он генерирует файл test.js. это работает так, как я ожидал. Но этот файл не «запускается», когда я запускаю его с помощью node. Потому что у него нет всего импорта TS. он не компилирует их так же, как включение html. Имеет ли это смысл?