Belajar Menggunakan Vite Dan NX
Postingan ringkas ini menolong Anda menyatukan Vite dengan alat monorepo NX.
ikuti langkah-langkah berikut ini dan Anda akan mendapati jika mereka bekerja sama seperti yang diharapkan.
Catatan: Saya bukan penggemar yarn, jadi saya menggunakan npm command, tetapi Anda dapat beralih ke yarn jika Anda mau.
Kami merekomendasikan menggunakan @nxext/vite
Saya mengecek beberapa generator dan paket ini lebih bagus (bukan "terbaik", tapi lebih bagus).
Catatan: Berharap tukar kata "vite" dengan salah satunya dari "react"/"preact"/"svelte"/"kompak" dalam operasi install dan "generate". Bila Anda memakai JS atau Vue biasa (seperti saya, tulis command di atas).
Instal dengan menjalankan:
npm install @nxext/vite --save-dev
Kemudian buat aplikasinya.
nx g @nxext/vite:app my-app
Peningkatan versi Vite
Saya selalu lebih suka menggunakan vite versi stabil terbaru karena ada banyak peningkatan dan peningkatan kecepatan antar versi. Juga, jangan mengandalkan pembaruan generator NX khusus.
Pada saat menulis posting ini, versi terbaru adalah 3.1.0 dan saya menggunakannya dalam kode saya, tetapi jangan ragu untuk mendapatkan versi baru.
jalankan:
npm i --save-dev vite
Ganti versi Vite
Generator dan beberapa library internal lainnya menggunakan versi vite yang berbeda dengan dependensinya sendiri. Untuk menghindarinya dan memastikan package.json Anda adalah yang menetapkan aturan dan menghindari kesalahan pemasangan npm, pastikan file package.json Anda berisi versi vite override.
{
"name": "my-nx-monorepo",
"dependencies": {...},
"overrides": {
"vite": "^3.1.0"
}
}
Vitest juga perlu
Kecuali Anda mengkodekan situs web PHP untuk toko hewan peliharaan paman Anda, Anda mungkin ingin menulis tes untuk aplikasi Anda.
Instal eksekutor vitest.
npm install @nxext/vitest -D
Kemudian init generator.
nx g @nxext/vitest:init
File vitest.config.ts dibuat di folder root repositori. Dapat digunakan kembali untuk semua aplikasi dalam monorepo.
Ayo jalankan aplikasi vite
Pelaksana @nxext/vite dilengkapi dengan file vite.config.ts bawaan bawaan. Jika Anda menggunakan react/solid/svelte/preact executors, mereka berisi konfigurasi default untuk kerangka kerja ini, tetapi masih disarankan untuk menimpanya di file konfigurasi Anda sendiri.
Buat file vite.config.ts di dalam aplikasi vite Anda dan letakkan konfigurasi vite favorit Anda.
Sebagai developer Vue, tampilannya seperti ini untuk saya:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()]
})
Catatan: Jika Anda juga seorang developer Vue, jangan lupa untuk menginstal paket-paket yang diperlukan dari npm.
npm i -D @vitejs/plugin-vue vue
Jangan lupa vitest.config.ts!
Kemungkinan besar file yang mengimpor vite.config.ts yang sebenarnya dan menimpa beberapa bagian. Misalnya. :
import { defineConfig } from 'vitest/config'
import config from './vite.config'
export default defineConfig({
...config,
test: { // you need those configs. thank me later:
globals: true,
environment: 'jsdom'
}
})
Ada beberapa konfigurasi TS yang hilang
Buka tsconfig.spec.json (konfigurasi TS untuk pengujian!) dan pastikan compilerOptions.types menyertakan vitest/globals.
Ini akan menjadi sebagai berikut.
{
"extends: "./tsconfig.json",
"compilerOptions": {
...
"types": ["vitest/globals", "node"]
}
...
}
Tanpa perubahan ini, IDE tidak akan mengenali fungsi vitest global dan utilitas pengujian (deskripsikan , it , harapkan , dll.).
Semua aplikasi memiliki project.json yang berubah
File project.json berisi deskripsi untuk setiap eksekutor yang mengikat ke folder (aplikasi).
Sekarang kita telah menambahkan vite.config.ts dan vitest.config.ts, kita perlu menyebutkan file-file ini dalam konfigurasi project.json kita.
Bangun dan layani target dan pastikan opsi semua orang menyertakan configFile yang menentukan jalur konfigurasi.
Ini akan menjadi sebagai berikut.
{
"$schema": "../../node_modules/nx/schemas/project-schema.json",
...
"targets": {
"build": {
..
"options": {
..
"configFile": "libs/my-app/vite.config.ts"
}
"configurations": { ... }
},
"serve": {
..
"options": {
..
"configFile": "libs/my-app/vite.config.ts"
}
"configurations": { ... }
}
...
}
Dalam file yang sama, temukan dan salin juga target test.
Saya lebih suka menambahkan target yang disebut test-watch. Jadi target asli digunakan untuk menjalankan tunggal "normal" dan "jam tangan" digunakan oleh pengembang (tampaknya dengan jam tangan sistem file).
Target test ini terlihat seperti ini:
{
"$schema": "../../node_modules/nx/schemas/project-schema.json",
...
"targets": {
"test": {
..
"options": {
"command": "run",
"vitestConfig": "libs/my-app/vitest.config.ts",
"passWithNoTests": true
}
},
"test-watch": {
..
"options": {
"command": "watch",
"vitestConfig": "libs/my-app/vitest.config.ts",
"passWithNoTests": true
}
}
...
}
Perhatikan properti "command". Ini ditambahkan ke cli vitest sebagai argumen kedua. run berarti menjalankan sekali dan menonton berjalan dan menunggu perubahan file.
Sunting: Perubahan tambahan untuk Vue + Vitest
Jika saya menggunakan fitur <script setup> untuk menulis komponen Vue saya, unit test bekerja seperti yang diharapkan, tetapi tanpa atribut setup TS IntelliSense tidak mengenali antarmuka file.
Solusi pertama adalah mengembalikan objek komponen yang dibungkus dengan defineComponent({ .. }) , tetapi aneh untuk menambahkan hanya untuk pengujian unit ketika "kode nyata" tidak benar-benar membutuhkannya.
larutan:
Buat file vite-env.d.ts dan vitest-env.d.ts di dalam folder src proyek Anda.
src/vite-env.d.ts:
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}
src/vitest-env.d.ts:
/// <reference types="vitest" />
Kemudian temukan file tsconfig.spec.json di proyek Anda dan tambahkan baris yang dicetak tebal ke array include.
{
"extends": "./tsconfig.json",
...
"include: [
...
"**/*.d.ts" // <<-- add this line
]
Semoga beruntung!
Bagikan keberhasilan atau kegagalan Anda di komentar agar kita semua bisa belajar.