Создание проекта с нуля: TypeScript + Jest + Sass + ESLint
Начинать новый проект — наверное, одно из самых скучных дел, когда у тебя уже есть идеи и задачи для реализации. И в течение последних нескольких лет стандартным инструментом для сборки был webpack.
Но время меняется, и теперь у нас, наверное, новая звезда — Вите.
Vite — это интерфейсный инструмент сборки, разработанный Эваном Ю. Это тот самый Эван Ю, который разработал фреймворк Vue и вывел на рынок Anguar и React.
У меня уже есть руководство (которое я регулярно обновляю) о том, как начать проект с помощью Webpack, используя основные современные инструменты:
- Машинопись
- Препроцессор CSS (например, sass)
- ESLint как линтер кода
- Jest как среда модульного тестирования
Сегодня мы сделаем то же самое, но с помощью Vite. И я уже хочу сказать — это невероятно. Это как перейти с настройки Karma+Mocka+Chai на Jest. Кривая обучения минимальна.
Инициировать проект
Теперь нам даже не нужно создавать папку. Vite имеет несколько исходных шаблонов, которые можно установить с помощью одной команды:
# For npm 7+, extra double-dash is needed: npm create vite@latest project-name -- --template vanilla-ts # For npm 6.x npm create vite@latest project-name --template vanilla-ts
Как видите, я выбираю vanilla-ts, но есть масса готовых шаблонов для популярных фреймворков: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts .
Этот шаблон уже достаточно хорош для создания простого проекта MVP.
Вы уже можете запустить npm i, а затем запустить сервер разработки (npm run dev) или создать рабочий пакет (npm run build).
Шаблон vanilla-ts может понимать HTML, TypeScript и CSS. Более того, он уже настроен на использование любых активов. Вы можете импортировать текст или значки в свой компонент или просто поместить что-нибудь в папку public, и все внутри этой папки будет доступно из корня /path_to_your_file.format.
Но давайте добавим препроцессор CSS, ESLint и модульные тесты.
Препроцессор CSS (sass, scss)
Vite ориентирован на современные браузеры, поэтому они рекомендуют использовать современный CSS с переменными CSS и плагинами PostCSS, такими как postcss-nesting.
Но он также поддерживает все современные препроцессоры CSS: .scss, .sass, .less, .styl. Чтобы включить любой из них, нужно выполнить соответствующую команду.
# .scss and .sass npm add -D sass # .less npm add -D less # .styl and .stylus npm add -D stylus
Вот и все! Все настроено, переименуйте существующий .css файл в .scss или любой другой формат, и он правильно его разберет.
Таким образом, TypeScript, HTML, CSS, активы и препроцессоры работают в Vite «из коробки».
Теперь ESLint и модульные тесты.
ESLint
Есть два способа, насколько глубоко вы хотите интегрировать ESLint. Во-первых, это простая инициализация конфигурации с помощью npm init @eslint/config в зависимости от вашей IDE. И второе — интеграция в процесс сборки Vite.
Чтобы интегрировать ESLint в Vite, вы можете использовать сторонний плагин Vite-plugin-eslint.
npm install eslint vite-plugin-eslint --save-dev
Теперь нам нужно добавить пользовательскую конфигурацию. Для пользовательской конфигурации Vite вы должны создать файл конфигурации vite.config.js, как в веб-пакете, но это будет намного проще.
И поставить туда:
import { defineConfig } from 'vite'
import eslint from 'vite-plugin-eslint'
export default defineConfig({
plugins: [eslint()]
})
Кроме того, нам все еще нужно создать .eslintrc. Это должен быть простой объект вместо экспорта ESM.
{
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"rules": {
"@typescript-eslint/no-non-null-assertion": "off"
},
"env": {
"browser": true,
"amd": true
},
"root": true
}
Я добавил @typescript-eslint/no-non-null-assertionrule, так как Vite обычно использует !. ненулевой оператор утверждения.
ESLint настроен. Давайте перейдем к последнему шагу и настроим модульные тесты.
Шутка
Для меня Jest по-прежнему остается лучшим фреймворком для модульных тестов, и одним из его преимуществ является простота настройки.
Во-первых, вам нужно установить его и его типы, потому что мы используем TypeScript.
npm install --save-dev jest ts-jest @types/jest jest-environment-jsdom
Затем запустите файл конфигурации:
npx ts-jest config:init
И изменение сгенерировало jest.config.js немного.
/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
preset: 'ts-jest',
testEnvironment: 'jsdom'
};
Я изменил среду на jsdom, чтобы иметь возможность использовать элементы DOM внутри модульных тестов. Вот пример файла модульного теста /spec/counter.spec.ts, который я создал для единственной функции, которая идет со сгенерированным шаблоном:
import { setupCounter } from '../src/counter';
describe('Setup counter button', function () {
let el: HTMLButtonElement;
beforeEach(() => {
el = document.createElement('button');
});
it('Should setup counter event', function () {
setupCounter(el);
el.click();
expect(el.innerHTML).toBe('count is 1');
});
});
Далее, конечно, мы можем добавить команду jest в package.json.
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "npx jest"
}
Мы сделали!
Заключение
Настройка общего проекта Vite может занять примерно 1 минуту, если вас устраивает его богатая функциональность из коробки. Дополнительные настройки, такие как препроцессоры, линтер и модульные тесты, могут занять дополнительные 5 минут вашего дня 😅.
Спасибо за чтение, и хорошего дня!
Если вы не являетесь участником Medium и хотели бы поддержать меня, вы можете сделать это, перейдя по этой ссылке. Членство в Medium позволит вам читать мои посты и посты других людей на Medium. Еще раз спасибо за вашу поддержку!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
