既存プロジェクトのviteへの移行
makotottsdxの代替としてviteを考える。
既存のプロジェクトをviteに移行する手順がviteの公式ドキュメントにはなさそう。
makotot$ npm create vite@latestで適当なプロジェクトを用意して、必要であろうnpmパッケージを確認。
npm create vite@latest
Need to install the following packages:
create-vite@latest
Ok to proceed? (y) y
✔ Project name: … vite-test-project
✔ Select a framework: › react
✔ Select a variant: › react-ts
ReactかつTypeScriptの場合、
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"typescript": "^4.6.3",
"vite": "^2.9.9"
なので、viteと@vitejs/plugin-reactがviteで必要になるnpmパッケージと思われる。
移行するプロジェクトにインストールする。
$ npm i -E -D vite @vitejs/plugin-react
startとbuildタスクでviteを使うようにする。
"scripts": {
"start": "vite dev",
"build": "vite build",
vite.config.tsを追加する
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})
ライブラリのプロジェクトのためbuild.libを指定する。
build: {
lib: {
entry: './src/index.ts',
formats: ['es', 'cjs'],
name: 'my-lib',
fileName: (format) => `my-lib.${format}.js`,
},
},
ビルド時にreactを含まないようにrollupOptionsの指定を追加する
rollupOptions: {
external: ['react', 'react-dom'],
output: {
globals: {
react: 'react',
},
},
},
htmlを用意する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
適当な形でmain.tsxを用意する
import * as React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
if (!rootElement) {
throw new Error('Root element is not found');
}
const root = ReactDOMClient.createRoot(rootElement);
root.render(<App />);
viteを使うのであればtestもjestよりvitestにしておいた方が都合が良さそう
Jest represents a duplication of complexity. If your app is powered by Vite, having two different pipelines to configure and maintain is not justifiable. With Vitest you get to define the configuration for your dev, build and test environments as a single pipeline, sharing the same plugins and the same vite.config.js.
https://vitest.dev/guide/comparisons.html#jest
makotot$ npm i -E -D vitest
インストールして、package.jsonのscriptsのtestをvitestに変更する
"test": "vitest",
ReferenceError: describe is not defined
describeやitなどはjestと違って明示的にimprotしないといけない
or
--globalsオプションを渡す
makototviteのdefineConfigを使っている場合には/// <reference types="vitest" />を追加することでvitestの型が利用できる
/// <reference types="vitest" />
import { defineConfig } from 'vite'
export default defineConfig({
デフォルトのテスト環境はnodeなのでブラウザ向けにenvironmentを指定する
test: {
environment: 'happy-dom', // or 'jsdom'
},