├── .github ├── pull_request_template.md └── workflows │ ├── lint.yml │ └── ryu-cho.yml ├── .gitignore ├── .textlintrc ├── .vitepress ├── buildEnd.config.ts ├── config.ts ├── theme │ ├── components │ │ ├── AsideSponsors.vue │ │ ├── BlogIndex.vue │ │ ├── SvgImage.vue │ │ ├── YouTubeVideo.vue │ │ └── landing │ │ │ ├── 1. hero-section │ │ │ ├── HeroDiagram.vue │ │ │ ├── HeroSection.vue │ │ │ └── svg-elements │ │ │ │ ├── SvgBlueIndicator.vue │ │ │ │ ├── SvgInputs.vue │ │ │ │ ├── SvgOutputs.vue │ │ │ │ └── SvgPinkIndicator.vue │ │ │ ├── 2. feature-section │ │ │ ├── FeatureCI.vue │ │ │ ├── FeatureFlexiblePlugins.vue │ │ │ ├── FeatureHMR.vue │ │ │ ├── FeatureInstantServerStart.vue │ │ │ ├── FeatureOptimizedBuild.vue │ │ │ ├── FeatureRichFeatures.vue │ │ │ ├── FeatureSSRSupport.vue │ │ │ ├── FeatureSection.vue │ │ │ ├── FeatureTypedAPI.vue │ │ │ └── images │ │ │ │ ├── css3.svg │ │ │ │ ├── js.svg │ │ │ │ ├── json.svg │ │ │ │ ├── postcss.svg │ │ │ │ ├── ts.svg │ │ │ │ └── wa.svg │ │ │ ├── 3. frameworks-section │ │ │ ├── FrameworkCard.vue │ │ │ ├── FrameworksSection.vue │ │ │ └── images │ │ │ │ ├── adonis.svg │ │ │ │ ├── analog.svg │ │ │ │ ├── angular.svg │ │ │ │ ├── astro.svg │ │ │ │ ├── ember.svg │ │ │ │ ├── hono.svg │ │ │ │ ├── laravel.svg │ │ │ │ ├── marko.svg │ │ │ │ ├── nuxt.svg │ │ │ │ ├── playwright.svg │ │ │ │ ├── preact.svg │ │ │ │ ├── qwik.svg │ │ │ │ ├── react.svg │ │ │ │ ├── redwood.svg │ │ │ │ ├── remix.svg │ │ │ │ ├── solid.svg │ │ │ │ ├── storybook.svg │ │ │ │ ├── svelte.svg │ │ │ │ ├── vitest.svg │ │ │ │ └── vue.svg │ │ │ ├── 4. community-section │ │ │ ├── CommunityCard.vue │ │ │ └── CommunitySection.vue │ │ │ ├── 5. sponsor-section │ │ │ └── SponsorSection.vue │ │ │ ├── 6. get-started-section │ │ │ └── GetStartedSection.vue │ │ │ └── common │ │ │ └── SvgNode.vue │ ├── composables │ │ ├── sponsor.ts │ │ ├── useCardAnimation.ts │ │ └── useSlideIn.ts │ ├── index.ts │ └── styles │ │ ├── landing.css │ │ └── vars.css ├── tsconfig.json └── vite-env.d.ts ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── _data ├── blog.data.ts └── team.js ├── blog.md ├── blog ├── announcing-vite2.md ├── announcing-vite3.md ├── announcing-vite4-3.md ├── announcing-vite4.md ├── announcing-vite5-1.md ├── announcing-vite5.md └── announcing-vite6.md ├── changes ├── hotupdate-hook.md ├── index.md ├── per-environment-apis.md ├── shared-plugins-during-build.md ├── ssr-using-modulerunner.md └── this-environment-in-hooks.md ├── config ├── build-options.md ├── dep-optimization-options.md ├── index.md ├── preview-options.md ├── server-options.md ├── shared-options.md ├── ssr-options.md └── worker-options.md ├── guide ├── api-environment-frameworks.md ├── api-environment-instances.md ├── api-environment-plugins.md ├── api-environment-runtimes.md ├── api-environment.md ├── api-hmr.md ├── api-javascript.md ├── api-plugin.md ├── assets.md ├── backend-integration.md ├── build.md ├── cli.md ├── dep-pre-bundling.md ├── env-and-mode.md ├── features.md ├── index.md ├── migration.md ├── performance.md ├── philosophy.md ├── rolldown.md ├── ssr.md ├── static-deploy-github-pages.yaml ├── static-deploy.md ├── troubleshooting.md ├── using-plugins.md └── why.md ├── images ├── bundler.svg ├── community │ └── placeholder.jpg ├── esm.svg ├── graph.svg ├── lit.svg ├── preact.svg ├── react.svg ├── svelte.svg ├── v3-docs.png ├── v3-new-open-issues-and-PRs.png ├── v3-open-issues-and-PRs.png ├── vercel-configuration.png ├── vite-3-cold-start.svg ├── vite-environments.svg ├── vite-plugin-inspect.png ├── vite.svg └── vue.svg ├── index.md ├── netlify.toml ├── package.json ├── plugins └── index.md ├── pnpm-lock.yaml ├── public ├── _headers ├── _redirects ├── astro.svg ├── bolt.svg ├── cypress.svg ├── ecosystem-vite4.png ├── github.svg ├── heart.svg ├── logo-home.svg ├── logo-with-shadow.png ├── logo.svg ├── noise.png ├── nuxtlabs.svg ├── og-image-announcing-vite3.png ├── og-image-announcing-vite4-3.png ├── og-image-announcing-vite4.png ├── og-image-announcing-vite5-1.png ├── og-image-announcing-vite5.png ├── og-image-announcing-vite6.png ├── og-image.jpg ├── stackblitz.svg ├── vite.mp3 ├── vite4-3-hmr-time.png ├── vite4-3-startup-time.png ├── vite5-1-10K-modules-loading-time.png ├── vite6-npm-weekly-downloads.png ├── viteconf.svg ├── voice.svg └── voidzero.svg ├── releases.md └── team.md /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | resolve #2000 2 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | textlint: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v4 12 | - uses: pnpm/action-setup@v4 13 | - uses: actions/setup-node@v4 14 | with: 15 | node-version: 22 16 | cache: 'pnpm' 17 | - name: Install deps 18 | run: pnpm install 19 | - name: Run textlint 20 | run: pnpm run lint 21 | env: 22 | CI: true 23 | -------------------------------------------------------------------------------- /.github/workflows/ryu-cho.yml: -------------------------------------------------------------------------------- 1 | name: ryu-cho 2 | 3 | on: 4 | schedule: 5 | - cron: '*/5 * * * *' 6 | 7 | jobs: 8 | ryu-cho: 9 | name: Ryu Cho 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: vuejs-translations/ryu-cho@v1 13 | with: 14 | access-token: ${{ secrets.ACCESS_TOKEN }} 15 | username: kiaking 16 | email: "kia.king.08@gmail.com" 17 | upstream-repo: https://github.com/vitejs/docs-ja.git 18 | upstream-repo-branch: main 19 | head-repo: https://github.com/vitejs/vite 20 | head-repo-branch: main 21 | track-from: 8fa75b5f9ff3730270d0793e860019b9aa4577de 22 | path-starts-with: docs/ 23 | workflow-name: ryu-cho 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vitepress/cache 2 | dist 3 | node_modules 4 | -------------------------------------------------------------------------------- /.textlintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "preset-vuejs-jp": { 4 | "2.1.6.カタカナの長音": true, 5 | "4.3.1.丸かっこ（）": true, 6 | "no-mix-dearu-desumasu": { 7 | "strict": false 8 | } 9 | } 10 | }, 11 | "filters": { 12 | "allowlist": { 13 | "allow": [ 14 | "->", 15 | ">=", 16 | "<<<" 17 | ] 18 | }, 19 | "comments": true 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.vitepress/buildEnd.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'node:path' 2 | import { writeFileSync } from 'node:fs' 3 | import { Feed } from 'feed' 4 | import type { SiteConfig } from 'vitepress' 5 | import { createContentLoader } from 'vitepress' 6 | 7 | const siteUrl = 'https://vite.dev' 8 | const blogUrl = `${siteUrl}/blog` 9 | 10 | export const buildEnd = async (config: SiteConfig): Promise => { 11 | const feed = new Feed({ 12 | title: 'Vite', 13 | description: 'Next Generation Frontend Tooling', 14 | id: blogUrl, 15 | link: blogUrl, 16 | language: 'en', 17 | image: 'https://vite.dev/og-image.png', 18 | favicon: 'https://vite.dev/logo.svg', 19 | copyright: 'Copyright © 2019-present VoidZero Inc. & Vite Contributors', 20 | }) 21 | 22 | const posts = await createContentLoader('blog/*.md', { 23 | excerpt: true, 24 | render: true, 25 | }).load() 26 | 27 | posts.sort( 28 | (a, b) => 29 | +new Date(b.frontmatter.date as string) - 30 | +new Date(a.frontmatter.date as string), 31 | ) 32 | 33 | for (const { url, excerpt, frontmatter, html } of posts) { 34 | feed.addItem({ 35 | title: frontmatter.title, 36 | id: `${siteUrl}${url}`, 37 | link: `${siteUrl}${url}`, 38 | description: excerpt, 39 | content: html, 40 | author: [ 41 | { 42 | name: frontmatter.author.name, 43 | }, 44 | ], 45 | date: frontmatter.date, 46 | }) 47 | } 48 | 49 | writeFileSync(path.join(config.outDir, 'blog.rss'), feed.rss2()) 50 | } 51 | -------------------------------------------------------------------------------- /.vitepress/theme/components/AsideSponsors.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 36 | 37 | 89 | -------------------------------------------------------------------------------- /.vitepress/theme/components/BlogIndex.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 47 | -------------------------------------------------------------------------------- /.vitepress/theme/components/SvgImage.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 23 | -------------------------------------------------------------------------------- /.vitepress/theme/components/YouTubeVideo.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 38 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/1. hero-section/HeroSection.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 44 | 45 | 145 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgInputs.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 52 | 53 | 66 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/1. hero-section/svg-elements/SvgOutputs.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 48 | 49 | 57 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/2. feature-section/images/css3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/2. feature-section/images/js.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/2. feature-section/images/json.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/2. feature-section/images/ts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/2. feature-section/images/wa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/FrameworkCard.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 62 | 63 | 128 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/adonis.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/angular.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/astro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/ember.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/hono.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/laravel.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/nuxt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/playwright.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/preact.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/qwik.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/redwood.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/remix.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/storybook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/svelte.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/vitest.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/3. frameworks-section/images/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/4. community-section/CommunityCard.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 54 | 55 | 123 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/4. community-section/CommunitySection.vue: -------------------------------------------------------------------------------- 1 | 85 | 86 | 104 | 105 | 147 | -------------------------------------------------------------------------------- /.vitepress/theme/components/landing/common/SvgNode.vue: -------------------------------------------------------------------------------- 1 | 123 | 124 | 183 | 184 | 215 | -------------------------------------------------------------------------------- /.vitepress/theme/composables/sponsor.ts: -------------------------------------------------------------------------------- 1 | import { onMounted, onUnmounted, ref } from 'vue' 2 | 3 | interface Sponsors { 4 | special: Sponsor[] 5 | platinum: Sponsor[] 6 | platinum_china: Sponsor[] 7 | gold: Sponsor[] 8 | silver: Sponsor[] 9 | bronze: Sponsor[] 10 | } 11 | 12 | interface Sponsor { 13 | name: string 14 | img: string 15 | url: string 16 | /** 17 | * Expects to also have an **inversed** image with `-dark` postfix. 18 | */ 19 | hasDark?: true 20 | } 21 | 22 | // shared data across instances so we load only once. 23 | const data = ref<{ tier: string; size: string; items: Sponsor[] }[]>() 24 | 25 | const dataHost = 'https://sponsors.vuejs.org' 26 | const dataUrl = `${dataHost}/vite.json` 27 | 28 | export const voidZero = { 29 | name: 'VoidZero', 30 | url: 'https://voidzero.dev', 31 | img: '/voidzero.svg', 32 | } satisfies Sponsor 33 | 34 | const viteSponsors: Pick = { 35 | special: [ 36 | // sponsors patak-dev 37 | { 38 | name: 'Bolt', 39 | url: 'https://bolt.new', 40 | img: '/bolt.svg', 41 | }, 42 | // sponsors antfu 43 | { 44 | name: 'NuxtLabs', 45 | url: 'https://nuxtlabs.com', 46 | img: '/nuxtlabs.svg', 47 | }, 48 | ], 49 | gold: [ 50 | // now automated via sponsors.vuejs.org too 51 | ], 52 | } 53 | 54 | function toggleDarkLogos() { 55 | if (data.value) { 56 | const isDark = document.documentElement.classList.contains('dark') 57 | data.value.forEach(({ items }) => { 58 | items.forEach((s: Sponsor) => { 59 | if (s.hasDark) { 60 | s.img = isDark 61 | ? s.img.replace(/(\.\w+)$/, '-dark$1') 62 | : s.img.replace(/-dark(\.\w+)$/, '$1') 63 | } 64 | }) 65 | }) 66 | } 67 | } 68 | 69 | export function useSponsor() { 70 | onMounted(async () => { 71 | const ob = new MutationObserver((list) => { 72 | for (const m of list) { 73 | if (m.attributeName === 'class') { 74 | toggleDarkLogos() 75 | } 76 | } 77 | }) 78 | ob.observe(document.documentElement, { attributes: true }) 79 | onUnmounted(() => { 80 | ob.disconnect() 81 | }) 82 | 83 | if (data.value) { 84 | return 85 | } 86 | 87 | const result = await fetch(dataUrl) 88 | const json = await result.json() 89 | 90 | data.value = mapSponsors(json) 91 | toggleDarkLogos() 92 | }) 93 | 94 | return { 95 | data, 96 | } 97 | } 98 | 99 | function mapSponsors(sponsors: Sponsors) { 100 | return [ 101 | { 102 | tier: 'パートナーシップ', 103 | size: 'big', 104 | items: viteSponsors['special'], 105 | }, 106 | { 107 | tier: 'プラチナスポンサー', 108 | size: 'big', 109 | items: mapImgPath(sponsors['platinum']), 110 | }, 111 | { 112 | tier: 'ゴールドスポンサー', 113 | size: 'medium', 114 | items: [...mapImgPath(sponsors['gold']), ...viteSponsors['gold']], 115 | }, 116 | ] 117 | } 118 | 119 | const viteSponsorNames = new Set( 120 | Object.values(viteSponsors).flatMap((sponsors) => 121 | sponsors.map((s) => s.name), 122 | ), 123 | ) 124 | 125 | /** 126 | * Map Vue/Vite sponsors data to objects and filter out Vite-specific sponsors 127 | */ 128 | function mapImgPath(sponsors: Sponsor[]) { 129 | return sponsors 130 | .filter((sponsor) => !viteSponsorNames.has(sponsor.name)) 131 | .map((sponsor) => ({ 132 | ...sponsor, 133 | img: `${dataHost}/images/${sponsor.img}`, 134 | })) 135 | } 136 | -------------------------------------------------------------------------------- /.vitepress/theme/composables/useCardAnimation.ts: -------------------------------------------------------------------------------- 1 | import { type Ref, onMounted, onUnmounted, ref } from 'vue' 2 | import { gsap } from 'gsap' 3 | import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' 4 | 5 | gsap.registerPlugin(ScrollTrigger) 6 | 7 | /** 8 | * A custom hook for animating a card element. 9 | * 10 | * @param {HTMLElement | string} el - The element or selector for the element to be animated 11 | * @param {() => GSAPTimeline} animation - A function that returns a GSAP timeline for the animation 12 | * @param {object} options - Options for the animation 13 | */ 14 | export function useCardAnimation( 15 | el: HTMLElement | string, 16 | animation: (() => GSAPTimeline) | undefined = undefined, 17 | options?: { 18 | /** 19 | * A flag to indicate whether the animation should only run once, and not reset once complete. 20 | */ 21 | once?: boolean 22 | }, 23 | ) { 24 | /** 25 | * The GSAP timeline for this animation. 26 | */ 27 | let timeline: GSAPTimeline | null 28 | 29 | /** 30 | * A flag to indicate whether the card is currently active or not. 31 | * May be inactive while the animation is still finishing up, due to CSS transitions. 32 | */ 33 | const isCardActive: Ref = ref(false) 34 | 35 | /** 36 | * An internal flag to prevent multiple animations from running at the same time. 37 | */ 38 | const isAnimationRunning: Ref = ref(false) 39 | 40 | /** 41 | * Starts the card's animation, managing the lifecycle internally to prevent multiple animations from running at the same time. 42 | */ 43 | const startAnimation = () => { 44 | if (isAnimationRunning.value) { 45 | return 46 | } else { 47 | isAnimationRunning.value = true 48 | isCardActive.value = true 49 | } 50 | if (timeline) { 51 | timeline.kill() 52 | } 53 | if (!animation) { 54 | return 55 | } 56 | timeline = gsap.timeline({ 57 | onComplete: () => { 58 | if (!options?.once) { 59 | isCardActive.value = false 60 | setTimeout(() => { 61 | isAnimationRunning.value = false 62 | }, 3000) 63 | } 64 | }, 65 | }) 66 | timeline.add(animation()) 67 | } 68 | 69 | /** 70 | * The ScrollTrigger instance for this card. 71 | */ 72 | let scrollTriggerInstance: ScrollTrigger | null = null 73 | 74 | /** 75 | * Trigger's the card's animation automatically on mobile devices (no hover method) 76 | */ 77 | onMounted(() => { 78 | if (window.innerWidth < 768) { 79 | scrollTriggerInstance = ScrollTrigger.create({ 80 | trigger: el, 81 | start: 'top 60%', 82 | onEnter: () => { 83 | startAnimation() 84 | }, 85 | }) 86 | } 87 | }) 88 | 89 | /** 90 | * Remove the ScrollTrigger and GSAP timeline instances when the component is unmounted 91 | */ 92 | onUnmounted(() => { 93 | if (scrollTriggerInstance) { 94 | scrollTriggerInstance.kill() 95 | scrollTriggerInstance = null 96 | } 97 | if (timeline) { 98 | timeline.kill() 99 | timeline = null 100 | } 101 | }) 102 | 103 | return { 104 | startAnimation, 105 | isCardActive, 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /.vitepress/theme/composables/useSlideIn.ts: -------------------------------------------------------------------------------- 1 | import { nextTick, onMounted } from 'vue' 2 | import { gsap } from 'gsap' 3 | 4 | export function useSlideIn(el: HTMLElement | string) { 5 | onMounted(async () => { 6 | await nextTick(() => { 7 | gsap.to(el, { 8 | x: 0, 9 | duration: 1, 10 | ease: 'power3.out', 11 | scrollTrigger: { 12 | trigger: el, 13 | start: 'top 100%', 14 | once: true, 15 | }, 16 | }) 17 | }) 18 | }) 19 | } 20 | -------------------------------------------------------------------------------- /.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import { h } from 'vue' 2 | import type { Theme } from 'vitepress' 3 | import DefaultTheme from 'vitepress/theme' 4 | import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client' 5 | import '@shikijs/vitepress-twoslash/style.css' 6 | import './styles/vars.css' 7 | import './styles/landing.css' 8 | import AsideSponsors from './components/AsideSponsors.vue' 9 | import SvgImage from './components/SvgImage.vue' 10 | import YouTubeVideo from './components/YouTubeVideo.vue' 11 | import 'virtual:group-icons.css' 12 | 13 | export default { 14 | extends: DefaultTheme, 15 | Layout() { 16 | return h(DefaultTheme.Layout, null, { 17 | 'aside-ads-before': () => h(AsideSponsors), 18 | }) 19 | }, 20 | enhanceApp({ app }) { 21 | app.component('SvgImage', SvgImage) 22 | app.component('YouTubeVideo', YouTubeVideo) 23 | app.use(TwoslashFloatingVue) 24 | }, 25 | } satisfies Theme 26 | -------------------------------------------------------------------------------- /.vitepress/theme/styles/landing.css: -------------------------------------------------------------------------------- 1 | /* /////////////////////// */ 2 | /* Landing Page CSS Styles */ 3 | /* /////////////////////// */ 4 | 5 | html:has(.landing) { 6 | --vp-c-bg: #101010; 7 | 8 | background-color: #101010; 9 | 10 | body { 11 | background-color: #101010; 12 | } 13 | } 14 | 15 | .landing { 16 | overflow-x: hidden; 17 | background-color: #101010; 18 | 19 | * { 20 | -webkit-font-smoothing: antialiased !important; 21 | -moz-osx-font-smoothing: grayscale !important; 22 | text-rendering: optimizeLegibility !important; 23 | } 24 | 25 | /* /////////////////// */ 26 | /* VitePress Overrides */ 27 | /* /////////////////// */ 28 | 29 | .VPNavBar, 30 | .VPNavBar:not(.top) { 31 | background: transparent !important; 32 | 33 | @media (min-width: 768px) { 34 | backdrop-filter: blur(10px); 35 | background: rgba(15, 15, 15, 0.8) !important; 36 | border-bottom: 1px solid #262626 !important; 37 | } 38 | 39 | .content-body { 40 | background: none !important; 41 | transition: none; 42 | } 43 | } 44 | 45 | .VPNavBar *:not(.wrapper *) { 46 | transition: none; 47 | } 48 | 49 | .VPFooter { 50 | border-top: 1px solid #262626 !important; 51 | background: radial-gradient(circle at top center, #0f151a 30%, #000000 80%); 52 | } 53 | 54 | .VPHome { 55 | padding-bottom: 0 !important; 56 | margin-bottom: 0 !important; 57 | } 58 | 59 | /* /////////////// */ 60 | /* Force Dark Mode */ 61 | /* /////////////// */ 62 | 63 | .VPNavBarAppearance { 64 | display: none; 65 | } 66 | 67 | .VPMenu .translations + .group { 68 | display: none; 69 | } 70 | 71 | .VPNavScreenAppearance { 72 | visibility: hidden; 73 | } 74 | 75 | .social-links::before { 76 | margin-left: 0 !important; 77 | } 78 | 79 | /* ////////// */ 80 | /* Typography */ 81 | /* ////////// */ 82 | 83 | h1 { 84 | text-align: center; 85 | font-family: 'Manrope', sans-serif; 86 | font-style: normal; 87 | font-weight: 600; 88 | background: linear-gradient( 89 | 180deg, 90 | #fff 0%, 91 | rgba(255, 255, 255, 0.31) 100% 92 | ); 93 | background-clip: text; 94 | -webkit-background-clip: text; 95 | -webkit-text-fill-color: transparent; 96 | text-wrap: balance; 97 | cursor: default; 98 | font-size: 44px; 99 | line-height: 120%; 100 | letter-spacing: -0.88px; 101 | padding: 0 20px; 102 | margin-bottom: 15px; 103 | 104 | @media (min-width: 768px) { 105 | font-size: 64px; 106 | line-height: 81px; 107 | letter-spacing: -1.28px; 108 | } 109 | 110 | @media (min-width: 1025px) { 111 | font-size: 72px; 112 | letter-spacing: -1.44px; 113 | padding-bottom: 8px; /* Fix for hanging descender on "g" in "tooling" */ 114 | } 115 | } 116 | 117 | h2 { 118 | display: block; 119 | width: fit-content; 120 | font-family: Manrope, sans-serif; 121 | font-size: 32px; 122 | font-style: normal; 123 | font-weight: 600; 124 | line-height: 120%; 125 | letter-spacing: -0.64px; 126 | cursor: default; 127 | text-wrap: balance; 128 | padding: 0 20px; 129 | 130 | @media (min-width: 768px) { 131 | font-size: 44px; 132 | letter-spacing: -0.88px; 133 | } 134 | } 135 | 136 | h3 { 137 | color: #a9a9a9; 138 | text-align: center; 139 | font-family: Inter, sans-serif; 140 | font-size: 19px; /* 日本語版: 元は 20px */ 141 | font-style: normal; 142 | font-weight: 400; 143 | line-height: 150%; 144 | letter-spacing: -0.4px; 145 | max-width: 500px; 146 | text-wrap: balance; 147 | cursor: default; 148 | margin-bottom: 25px; 149 | padding: 0 20px; 150 | } 151 | 152 | /* /////// */ 153 | /* Buttons */ 154 | /* /////// */ 155 | 156 | .btn { 157 | display: flex; 158 | padding: 10px 18px; 159 | justify-content: center; 160 | align-items: center; 161 | gap: 8px; 162 | border-radius: 8px; 163 | color: #fff; 164 | font-family: Inter, sans-serif; 165 | font-size: 16px; 166 | font-style: normal; 167 | font-weight: 500; 168 | line-height: 24px; 169 | text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); 170 | transition: all 0.2s ease-in-out; 171 | width: fit-content; 172 | 173 | &:hover { 174 | transform: translate3d(0, -2px, 0); 175 | } 176 | 177 | &.btn--primary { 178 | position: relative; 179 | background: 180 | radial-gradient( 181 | 141.42% 141.42% at 100% 0%, 182 | rgba(255, 255, 255, 0.4) 0%, 183 | rgba(255, 255, 255, 0) 100% 184 | ), 185 | radial-gradient( 186 | 140.35% 140.35% at 100% 94.74%, 187 | #bd34fe 0%, 188 | rgba(189, 52, 254, 0) 100% 189 | ), 190 | radial-gradient( 191 | 89.94% 89.94% at 18.42% 15.79%, 192 | #41d1ff 0%, 193 | rgba(65, 209, 255, 0) 100% 194 | ); 195 | box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.75) inset; 196 | 197 | &:hover { 198 | background: 199 | radial-gradient( 200 | 141.42% 141.42% at 100% 0%, 201 | rgba(255, 255, 255, 0.5) 0%, 202 | rgba(255, 255, 255, 0) 100% 203 | ), 204 | radial-gradient( 205 | 140.35% 140.35% at 100% 94.74%, 206 | #bd34fe 0%, 207 | rgba(189, 52, 254, 0) 100% 208 | ), 209 | radial-gradient( 210 | 89.94% 89.94% at 18.42% 15.79%, 211 | #41d1ff 0%, 212 | rgba(65, 209, 255, 0) 100% 213 | ); 214 | box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.8) inset; 215 | } 216 | } 217 | 218 | &.btn--outline { 219 | border: 1px solid rgba(255, 255, 255, 0.2); 220 | 221 | &:hover { 222 | border: 1px solid rgba(255, 255, 255, 0.4); 223 | } 224 | } 225 | 226 | &.btn--rounded { 227 | border-radius: 100px; 228 | } 229 | } 230 | } 231 | -------------------------------------------------------------------------------- /.vitepress/theme/styles/vars.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Colors 3 | * -------------------------------------------------------------------------- */ 4 | 5 | :root { 6 | --vp-c-brand: #646cff; 7 | --vp-c-brand-light: #747bff; 8 | --vp-c-brand-lighter: #9499ff; 9 | --vp-c-brand-lightest: #bcc0ff; 10 | --vp-c-brand-dark: #535bf2; 11 | --vp-c-brand-darker: #454ce1; 12 | --vp-c-brand-dimm: rgba(100, 108, 255, 0.08); 13 | } 14 | 15 | /** 16 | * Component: Button 17 | * -------------------------------------------------------------------------- */ 18 | 19 | :root { 20 | --vp-button-brand-border: var(--vp-c-brand-light); 21 | --vp-button-brand-text: var(--vp-c-white); 22 | --vp-button-brand-bg: var(--vp-c-brand); 23 | --vp-button-brand-hover-border: var(--vp-c-brand-light); 24 | --vp-button-brand-hover-text: var(--vp-c-white); 25 | --vp-button-brand-hover-bg: var(--vp-c-brand-light); 26 | --vp-button-brand-active-border: var(--vp-c-brand-light); 27 | --vp-button-brand-active-text: var(--vp-c-white); 28 | --vp-button-brand-active-bg: var(--vp-button-brand-bg); 29 | } 30 | 31 | /** 32 | * Component: Custom Block 33 | * -------------------------------------------------------------------------- */ 34 | 35 | :root { 36 | --vp-custom-block-tip-border: var(--vp-c-brand); 37 | --vp-custom-block-tip-text: var(--vp-c-brand-darker); 38 | --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); 39 | } 40 | 41 | .dark { 42 | --vp-custom-block-tip-border: var(--vp-c-brand); 43 | --vp-custom-block-tip-text: var(--vp-c-brand-lightest); 44 | --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); 45 | } 46 | 47 | /** 48 | * Component: Algolia 49 | * -------------------------------------------------------------------------- */ 50 | 51 | .DocSearch { 52 | --docsearch-primary-color: var(--vp-c-brand) !important; 53 | --docsearch-container-background: rgba(0, 0, 0, 0.7); 54 | } 55 | 56 | /** 57 | * VitePress: Custom fix 58 | * -------------------------------------------------------------------------- */ 59 | 60 | /* 61 | Use lighter colors for links in dark mode for a11y. 62 | Also specify some classes twice to have higher specificity 63 | over scoped class data attribute. 64 | */ 65 | .dark .vp-doc a, 66 | .dark .vp-doc a > code, 67 | .dark .VPNavBarMenuLink.VPNavBarMenuLink:hover, 68 | .dark .VPNavBarMenuLink.VPNavBarMenuLink.active, 69 | .dark .link.link:hover, 70 | .dark .link.link.active, 71 | .dark .edit-link-button.edit-link-button, 72 | .dark .pager-link .title { 73 | color: var(--vp-c-brand-lighter); 74 | } 75 | 76 | .dark .vp-doc a:hover, 77 | .dark .vp-doc a > code:hover { 78 | color: var(--vp-c-brand-lightest); 79 | opacity: 1; 80 | } 81 | 82 | /* Transition by color instead of opacity */ 83 | .dark .vp-doc .custom-block a { 84 | transition: color 0.25s; 85 | } 86 | 87 | .vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image { 88 | max-width: 124px; 89 | } 90 | 91 | .vp-sponsor-grid.big .vp-sponsor-grid-image { 92 | max-height: 56px; 93 | } 94 | 95 | .vp-sponsor-grid.mini .vp-sponsor-grid-image[alt='Bit'] { 96 | max-height: 48px; 97 | } 98 | 99 | .vp-sponsor-grid.xmini .vp-sponsor-grid-image[alt='JetBrains'] { 100 | max-height: 54px; 101 | } 102 | 103 | .vp-sponsor-grid.medium .vp-sponsor-grid-image[alt='JetBrains'] { 104 | max-height: 100px; 105 | } 106 | -------------------------------------------------------------------------------- /.vitepress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2023", 4 | "module": "Preserve", 5 | "moduleResolution": "bundler", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noUnusedLocals": true, 9 | "esModuleInterop": true, 10 | "noEmit": true 11 | }, 12 | "exclude": ["cache", "dist"] 13 | } 14 | -------------------------------------------------------------------------------- /.vitepress/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Vite 日本語翻訳ガイド 2 | 3 | ようこそ、Vite 日本語翻訳リポジトリーへ！ 4 | 翻訳プロジェクトに貢献したい方は、以下の内容を一読の上、お願いします。 5 | 6 | ## 貢献方法 7 | 8 | ### GitHub Issues にある本家ドキュメントの差分更新 9 | 英語版ドキュメントが更新されると、自動的に本リポジトリーにも issue が生成されるようになっています（説明文が `New updates on head repo.` となっているもの）。 10 | 11 | 1. [GitHub Issues](https://github.com/vitejs/docs-ja/issues) から、[このクエリー](https://github.com/vitejs/docs-ja/issues?q=is%3Aissue+is%3Aopen+sort%3Acreated-asc+New+updates+on+head+repo.) でソート & フィルターして、アサインされていない issues 一覧からできるだけ古いものからやりたい issue を選択します 12 | 2. 選択した issue で、「対応します！」などのコメントで宣言します（`vitejs/docs-ja` のメンテナーの方々は、GitHub の assign 機能で self assign で OK です） 13 | 3. このリポジトリー `vitejs/docs-ja` のメンテナーから同 issue でリアクションされたら、自分が選んだ issue の担当者として正式にアサインされたことになります 14 | 4. このリポジトリーをフォークします！ 15 | - README に従い、必ずパッケージをインストールしてください（textlint のため） 16 | 5. `main` ブランチからトピックブランチを作成します: `git branch my-topic-branch main` 17 | 6. 変更をコミットします: `git commit -am 'docs: fix typo'` 18 | - コミットメッセージは issue のタイトル（英語版のコミットメッセージ）と同じにしてください 19 | 7. textlint で引っかかる場合は再度修正を行いコミットします 20 | 8. フォークした自分のリポジトリーに Push します: `git push origin my-topic-branch` 21 | 9. 問題がなければ、プルリクエストを `vitejs/docs-ja` の `main` ブランチに送ります 22 | 10. レビューで指摘事項があったら修正 + Push し、再レビュー依頼（ :arrows_counterclockwise: ボタン）します 23 | - 依頼の前に、修正漏れがないか確認してください 24 | 11. レビューで OK ならば、マージされてドキュメントに反映されます :tada: 25 | 26 | #### Tips: より円滑な Pull Request のコメント記載方法 27 | 28 | GitHub の Pull Request には、特定の記法を Pull Request の本文に書くことによって、該当 Pull Request のマージ時に自動的に対応する Issues をクローズできる機能があります。 29 | Pull Request を送るときに、余裕があれば "resolve #123" といった形で、該当する Issues の番号を記載されているとレビュアーが非常に助かります :pray: 30 | 31 | ### タイポなどの修正 32 | 33 | 手順は上記の `4.` 以降と同じです。 34 | 35 | ## 翻訳スタイル 36 | 37 | - [JTF日本語標準スタイルガイド（翻訳用）](https://www.jtf.jp/tips/styleguide) - 基本的な翻訳スタイル。 38 | - [Microsoft ローカリゼーション スタイル ガイド](https://www.microsoft.com/ja-jp/language/styleguides) - 技術文書におけるスタイル。 39 | - [textlint-rule-preset-JTF-style](https://github.com/textlint-ja/textlint-rule-preset-JTF-style) - JTF 日本語標準スタイルガイド（翻訳用）の textlint のルールセット。 40 | - [textlint-rule-preset-vuejs-jp](https://github.com/vuejs-jp/textlint-rule-preset-vuejs-jp) - Vue.js 日本ユーザーグループで一部カスタマイズした textlint のルールセット。 41 | 42 | ## 翻訳のゆらぎ & トーン 43 | 44 | ### 文体 45 | 46 | 「だである」ではなく「ですます」調 47 | 48 | > Vite (French word for "fast", pronounced `/vit/`) is a build tool that aims to provide a faster and leaner development experience for modern web projects. 49 | 50 | 51 | - NG : Vite（フランス語で「速い」という意味の単語で `/vit/` と発音）は現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツール**である**。 52 | 53 | - OK : Vite（フランス語で「速い」という意味の単語で `/vit/` と発音）は現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツール**です**。 54 | 55 | ### 半角スペースでアルファベット両端を入れて読みやすく！ 56 | 57 | > Vite (French word for "fast", pronounced `/vit/`) is a build tool that aims to provide a faster and leaner development experience for modern web projects. 58 | 59 | 60 | - NG : Vite（フランス語で「速い」という意味の単語で`/vit/`と発音）は現代のWebプロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。 61 | 62 | - OK : Vite（フランス語で「速い」という意味の単語で `/vit/` と発音）現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。 63 | 64 | 例外として、句読点の前後にアルファベットがある場合は、スペースを入れなくてもいいです。 65 | 66 | - 読点: お気づきかもしれませんが、Vite プロジェクトでは `index.html` は `public` 内に隠れているのではなく、最も目立つ場所にあります。 67 | 68 | ### 原則、一語一句翻訳。ただし日本語として分かりにくい場合は読みやすさを優先 69 | 70 | > Dependencies are Strongly Cached. 71 | 72 | - NG: 依存関係は強力にキャッシュされます。 73 | - OK: 依存関係は積極的にキャッシュされます。 74 | 75 | ### 原文に使われる ':' や '!' や '?' などの記号は極力残して翻訳 76 | 77 | > Example: 78 | 79 | - NG: 例 80 | - OK: 例: 81 | 82 | ただし、文の途中にハイフン `-` やセミコロン `;` があり、その記号があると理解しづらい訳になる場合は、例外として削除してもよいです。 83 | 84 | - 原文: 85 | 86 | > NPM Dependency Resolving and Pre-Bundling. 87 | 88 | - 訳文: 89 | 90 | > NPM の依存関係の解決と事前バンドル。 91 | 92 | ### 単語の統一（特に技術用語） 93 | 94 | - 技術用語は基本英語、ただ日本語で一般的に使われている場合は日本語 OK !! 95 | - 例: 英語の filter 、日本語のフィルター 96 | - 和訳に困った、とりあえず英語 97 | - 例: expression -> 式、表現 98 | - 和訳にして分かりづらい場合は、翻訳と英語（どちらかに括弧付け）でも OK 99 | - 例: Two way -> Two way（双方向） 100 | 101 | ### 長音訳について 102 | 103 | 原則、**長音あり**で翻訳する。 104 | 105 | - NG: コンピュータ 106 | - OK: コンピューター 107 | 108 | ## 注意事項 109 | 110 | ### 行の追加・削除をしない 111 | 112 | 行番号が変わってしまうと英語版ドキュメントの変更を取り込む際に対応箇所を探すのが難しくなるので、原文と同じ行に翻訳してください。 113 | 114 | 原文: 115 | 116 | ```text 117 | 5 | When running `vite` from the command line, ... 118 | 6 | 119 | 7 | The most basic config file looks like this: 120 | ``` 121 | 122 | NG: 空行がなくなっている 123 | 124 | ```text 125 | 5 | コマンドラインから `vite` を実行すると、... 自動的に解決しようとします。 126 | 6 | 最も基本的な設定ファイルは次のようになります: 127 | ``` 128 | 129 | NG: 改行が増えている 130 | 131 | ```text 132 | 5 | コマンドラインから `vite` を実行すると、... 133 | 6 | 自動的に解決しようとします。 134 | 7 | 135 | 8 | 最も基本的な設定ファイルは次のようになります: 136 | ``` 137 | 138 | OK: 行がそのまま 139 | 140 | ```text 141 | 5 | コマンドラインから `vite` を実行すると、... 自動的に解決しようとします。 142 | 6 | 143 | 7 | 最も基本的な設定ファイルは次のようになります: 144 | ``` 145 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-present, VoidZero Inc. and Vite contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vite Docs JA 2 | 3 | [Vite ドキュメント](https://vite.dev)の日本語翻訳リポジトリーです。現状、本リポジトリーは翻訳作業用のものとして一時的に用意されています。将来的に、本リポジトリーは別場所に移動される可能性があります。 4 | 5 | ## 貢献ガイド 6 | [Vite 日本語翻訳ガイド](https://github.com/vitejs/docs-ja/blob/main/CONTRIBUTING.md) を一読お願いします！ 7 | 8 | 9 | ## はじめかた 10 | 11 | 本ドキュメントは [VitePress](https://vitepress.vuejs.org/) で作られています。ローカル環境で作業を行う場合は、以下のステップを踏んでください。 12 | 13 | ```bash 14 | # NPMパッケージをインストール 15 | $ pnpm install 16 | 17 | # ローカル Web サーバーを起動 18 | $ pnpm run docs 19 | ``` 20 | 21 | 上記コマンド実行後、`http://localhost:5173` にアクセスするとサイトにアクセスできます。 22 | -------------------------------------------------------------------------------- /_data/blog.data.ts: -------------------------------------------------------------------------------- 1 | import { createContentLoader } from 'vitepress' 2 | 3 | interface Post { 4 | title: string 5 | url: string 6 | date: { 7 | time: number 8 | string: string 9 | } 10 | } 11 | 12 | declare const data: Post[] 13 | export { data } 14 | 15 | export default createContentLoader('blog/*.md', { 16 | // excerpt: true, 17 | transform(raw): Post[] { 18 | return raw 19 | .map(({ url, frontmatter }) => ({ 20 | title: frontmatter.head.find((e) => e[1].property === 'og:title')[1] 21 | .content, 22 | url, 23 | date: formatDate(frontmatter.date), 24 | })) 25 | .sort((a, b) => b.date.time - a.date.time) 26 | }, 27 | }) 28 | 29 | function formatDate(raw: string): Post['date'] { 30 | const date = new Date(raw) 31 | date.setUTCHours(12) 32 | return { 33 | time: +date, 34 | string: date.toLocaleDateString('en-US', { 35 | year: 'numeric', 36 | month: 'long', 37 | day: 'numeric', 38 | }), 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /blog.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: false 3 | editLink: false 4 | outline: false 5 | --- 6 | 7 | 10 | 11 | # Vite ブログの最新記事 12 | 13 | 14 | -------------------------------------------------------------------------------- /blog/announcing-vite4-3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vite 4.3 is out! 3 | author: 4 | name: The Vite Team 5 | date: 2023-04-20 6 | sidebar: false 7 | head: 8 | - - meta 9 | - property: og:type 10 | content: website 11 | - - meta 12 | - property: og:title 13 | content: Announcing Vite 4.3 14 | - - meta 15 | - property: og:image 16 | content: https://vite.dev/og-image-announcing-vite4-3.png 17 | - - meta 18 | - property: og:url 19 | content: https://vite.dev/blog/announcing-vite4-3 20 | - - meta 21 | - property: og:description 22 | content: Vite 4.3 Release Announcement 23 | - - meta 24 | - name: twitter:card 25 | content: summary_large_image 26 | --- 27 | 28 | # Vite 4.3 is out! 29 | 30 | _April 20, 2023_ 31 | 32 | ![Vite 4.3 Announcement Cover Image](/og-image-announcing-vite4-3.png) 33 | 34 | Quick links: 35 | 36 | - Docs: [English](/), [简体中文](https://cn.vite.dev/), [日本語](https://ja.vite.dev/), [Español](https://es.vite.dev/), [Português](https://pt.vite.dev/) 37 | - [Vite 4.3 Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#430-2023-04-20) 38 | 39 | ## Performance Improvements 40 | 41 | In this minor, we focused on improving the dev server performance. The resolve logic got streamlined, improving hot paths and implementing smarter caching for finding `package.json`, TS config files, and resolved URL in general. 42 | 43 | You can read a detailed walkthrough of the performance work done in this blog post by one of Vite Contributors: [How we made Vite 4.3 faaaaster 🚀](https://sun0day.github.io/blog/vite/why-vite4_3-is-faster.html). 44 | 45 | This sprint resulted in speed improvements across the board compared to Vite 4.2. 46 | 47 | These are the performance improvements as measured by [sapphi-red/performance-compare](https://github.com/sapphi-red/performance-compare), which tests an app with 1000 React Components cold and warm dev server startup time as well as HMR times for a root and a leaf component: 48 | 49 | | **Vite (babel)** | Vite 4.2 | Vite 4.3 | Improvement | 50 | | :----------------- | --------: | -------: | ----------: | 51 | | **dev cold start** | 17249.0ms | 5132.4ms | -70.2% | 52 | | **dev warm start** | 6027.8ms | 4536.1ms | -24.7% | 53 | | **Root HMR** | 46.8ms | 26.7ms | -42.9% | 54 | | **Leaf HMR** | 27.0ms | 12.9ms | -52.2% | 55 | 56 | | **Vite (swc)** | Vite 4.2 | Vite 4.3 | Improvement | 57 | | :----------------- | --------: | -------: | ----------: | 58 | | **dev cold start** | 13552.5ms | 3201.0ms | -76.4% | 59 | | **dev warm start** | 4625.5ms | 2834.4ms | -38.7% | 60 | | **Root HMR** | 30.5ms | 24.0ms | -21.3% | 61 | | **Leaf HMR** | 16.9ms | 10.0ms | -40.8% | 62 | 63 | ![Vite 4.3 vs 4.2 startup time comparison](/vite4-3-startup-time.png) 64 | 65 | ![Vite 4.3 vs 4.2 HMR time comparison](/vite4-3-hmr-time.png) 66 | 67 | You can read more information about the benchmark [here](https://gist.github.com/sapphi-red/25be97327ee64a3c1dce793444afdf6e). Specs and Versions for this performance run: 68 | 69 | - CPU: Ryzen 9 5900X, Memory: DDR4-3600 32GB, SSD: WD Blue SN550 NVME SSD 70 | - Windows 10 Pro 21H2 19044.2846 71 | - Node.js 18.16.0 72 | - Vite and React Plugin versions 73 | - Vite 4.2 (babel): Vite 4.2.1 + plugin-react 3.1.0 74 | - Vite 4.3 (babel): Vite 4.3.0 + plugin-react 4.0.0-beta.1 75 | - Vite 4.2 (swc): Vite 4.2.1 + plugin-react-swc 3.2.0 76 | - Vite 4.3 (swc): Vite 4.3.0 + plugin-react-swc 3.3.0 77 | 78 | Early adopters have also reported seeing 1.5x-2x dev startup time improvement on real apps while testing the Vite 4.3 beta. We'd love to know the results for your apps. 79 | 80 | ## Profiling 81 | 82 | We'll continue to work on Vite's performance. We're working on an official [Benchmark tool](https://github.com/vitejs/vite-benchmark) for Vite that let us get performance metrics for each Pull Request. 83 | 84 | And [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) now has more performance-related features to help you identify which plugins or middlewares are the bottleneck for your applications. 85 | 86 | Using `vite --profile` (and then pressing `p`) once the page loads will save a CPU profile of the dev server startup. You can open them in an app as [speedscope](https://www.speedscope.app/) to identify performance issues. And you can share your findings with the Vite Team in a [Discussion](https://github.com/vitejs/vite/discussions) or in [Vite's Discord](https://chat.vite.dev). 87 | 88 | ## Next Steps 89 | 90 | We decided to do a single Vite Major this year aligning with the [EOL of Node.js 16](https://endoflife.date/nodejs) in September, dropping support for both Node.js 14 and 16 in it. If you would like to get involved, we started a [Vite 5 Discussion](https://github.com/vitejs/vite/discussions/12466) to gather early feedback. 91 | -------------------------------------------------------------------------------- /changes/hotupdate-hook.md: -------------------------------------------------------------------------------- 1 | # HMR `hotUpdate` プラグインフック 2 | 3 | ::: tip フィードバック 4 | [Environment API feedback discussion](https://github.com/vitejs/vite/discussions/16358)でフィードバックをお寄せください。 5 | ::: 6 | 7 | [Environment API](/guide/api-environment.md)を意識するために、`handleHotUpdate` プラグインフックを非推奨とし、[`hotUpdate` フック](/guide/api-environment#the-hotupdate-hook)を使用し、`create` と `delete` で追加の監視イベントを処理する予定です。 8 | 9 | 影響範囲: `Vite プラグイン作成者` 10 | 11 | ::: warning 将来の廃止予定 12 | `hotUpdate` は `v6.0` で初めて導入されました。`handleHotUpdate` の廃止は将来のメジャーバージョンで予定されています。現時点では、まだ `handleHotUpdate` からの移行は推奨していません。もし実験して私たちにフィードバックをしたいのであれば、vite config で `future.removePluginHookHandleHotUpdate` を `"warn"` に指定してください。 13 | ::: 14 | 15 | ## 動機 16 | 17 | [`handleHotUpdate` フック](/guide/api-plugin.md#handlehotupdate) はカスタム HMR 更新処理を行うことができます。更新するモジュールのリストは `HmrContext` に渡されます 18 | 19 | ```ts 20 | interface HmrContext { 21 | file: string 22 | timestamp: number 23 | modules: Array 24 | read: () => string | Promise 25 | server: ViteDevServer 26 | } 27 | ``` 28 | 29 | このフックはすべての環境に対して一度だけ呼び出され、渡されたモジュールはクライアント環境と SSR 環境だけの情報が混在しています。フレームワークがカスタム環境に移行すると、それぞれの環境に対して呼び出される新しいフックが必要になります。 30 | 31 | 新しい `hotUpdate` フックは `handleHotUpdate` と同じように動作しますが、環境ごとに呼び出され、新しい `HotUpdateOptions` インスタンスを受け取ります: 32 | 33 | ```ts 34 | interface HotUpdateOptions { 35 | type: 'create' | 'update' | 'delete' 36 | file: string 37 | timestamp: number 38 | modules: Array 39 | read: () => string | Promise 40 | server: ViteDevServer 41 | } 42 | ``` 43 | 44 | 現在の開発環境は他のプラグインフックのように `this.environment` でアクセスできます。`modules` のリストには現在の環境のモジュールノードのみが表示されます。各環境の更新は異なる更新ストラテジーを定義できます。 45 | 46 | このフックは `'update'` だけでなく、追加の監視イベントでも呼び出されるようになりました。これらを区別するには `type` を使用します。 47 | 48 | ## 移行ガイド 49 | 50 | HMR がより正確になるように、影響を受けるモジュールのリストをフィルタリングして絞り込みます。 51 | 52 | ```js 53 | handleHotUpdate({ modules }) { 54 | return modules.filter(condition) 55 | } 56 | 57 | // 以下に移行: 58 | 59 | hotUpdate({ modules }) { 60 | return modules.filter(condition) 61 | } 62 | ``` 63 | 64 | 空の配列を返して完全なリロードを実行します: 65 | 66 | ```js 67 | handleHotUpdate({ server, modules, timestamp }) { 68 | // モジュールを手動で無効化 69 | const invalidatedModules = new Set() 70 | for (const mod of modules) { 71 | server.moduleGraph.invalidateModule( 72 | mod, 73 | invalidatedModules, 74 | timestamp, 75 | true 76 | ) 77 | } 78 | server.ws.send({ type: 'full-reload' }) 79 | return [] 80 | } 81 | 82 | // 以下に移行: 83 | 84 | hotUpdate({ modules, timestamp }) { 85 | // モジュールを手動で無効化 86 | const invalidatedModules = new Set() 87 | for (const mod of modules) { 88 | this.environment.moduleGraph.invalidateModule( 89 | mod, 90 | invalidatedModules, 91 | timestamp, 92 | true 93 | ) 94 | } 95 | this.environment.hot.send({ type: 'full-reload' }) 96 | return [] 97 | } 98 | ``` 99 | 100 | 空の配列を返し、カスタムイベントをクライアントに送信することで、完全なカスタム HMR 処理を行います: 101 | 102 | ```js 103 | handleHotUpdate({ server }) { 104 | server.ws.send({ 105 | type: 'custom', 106 | event: 'special-update', 107 | data: {} 108 | }) 109 | return [] 110 | } 111 | 112 | // 以下に移行... 113 | 114 | hotUpdate() { 115 | this.environment.hot.send({ 116 | type: 'custom', 117 | event: 'special-update', 118 | data: {} 119 | }) 120 | return [] 121 | } 122 | ``` 123 | -------------------------------------------------------------------------------- /changes/index.md: -------------------------------------------------------------------------------- 1 | # 破壊的変更 2 | 3 | API の非推奨、削除、変更を含む、Vite の変更点のリストです。以下の変更のほとんどは、Vite の設定にある[`future` オプション](/config/shared-options.html#future)を使ってオプトインできます。 4 | 5 | ## 計画中 6 | 7 | これらの変更は Vite の次のメジャーバージョンで予定されています。非推奨または使用上の警告は、可能な限りガイドし、私たちはこれらの変更を適用するようフレームワーク、プラグイン作者、ユーザーに働きかけています。 8 | 9 | - _まだ変更予定はありません_ 10 | 11 | ## 検討中 12 | 13 | これらの変更は検討中であり、現在の使用パターンを改善するための実験的な API であることが多いです。すべての変更がここに記載されているわけではないので、完全なリストについては [Vite GitHub ディスカッションの experimental ラベル](https://github.com/vitejs/vite/discussions/categories/feedback?discussions_q=label%3Aexperimental+category%3AFeedback) を確認してください。 14 | 15 | これらの API に切り替えることはまだお勧めしません。これらの API はフィードバックを集めるために Vite に含まれています。これらの提案を確認し、あなたのユースケースでどのように機能するか、それぞれのリンク先の GitHub Discussions でお知らせください。 16 | 17 | - [フック内の `this.environment`](/changes/this-environment-in-hooks) 18 | - [HMR `hotUpdate` プラグインフック](/changes/hotupdate-hook) 19 | - [環境ごとの API への移行](/changes/per-environment-apis) 20 | - [`ModuleRunner` API を使った SSR](/changes/ssr-using-modulerunner) 21 | - [ビルド時の共有プラグイン](/changes/shared-plugins-during-build) 22 | 23 | ## 過去 24 | 25 | 以下の変更は、すでに終了または差し戻されています。現在のメジャーバージョンではこれらは関係ありません。 26 | 27 | - _過去の変更はまだありません_ 28 | -------------------------------------------------------------------------------- /changes/per-environment-apis.md: -------------------------------------------------------------------------------- 1 | # 環境ごとの API への移行 2 | 3 | ::: tip フィードバック 4 | [Environment API feedback discussion](https://github.com/vitejs/vite/discussions/16358)でフィードバックをお寄せください。 5 | ::: 6 | 7 | モジュールグラフとモジュール変換に関連する `ViteDevServer` の複数の API が `DevEnvironment` インスタンスに移動されました。 8 | 9 | 影響範囲: `Vite プラグイン作成者` 10 | 11 | ::: warning 将来の廃止予定 12 | `Environment` インスタンスは `v6.0` で初めて導入されました。将来のメジャーバージョンでは現在環境にある `server.moduleGraph` やその他のメソッドが廃止される予定です。まだサーバーのメソッドから移行することはお勧めしません。使用状況を明確にするために、vite の設定でこれらを設定してください。 13 | 14 | ```ts 15 | future: { 16 | removeServerModuleGraph: 'warn', 17 | removeServerTransformRequest: 'warn', 18 | } 19 | ``` 20 | 21 | ::: 22 | 23 | ## 動機 24 | 25 | Vite v5 以前では、単一の Vite 開発サーバーには常に 2 つの環境（`client` と `ssr`）がありました。 `server.moduleGraph` には、これらの両方の環境からの混合モジュールが含まれていました。ノードは `clientImportedModules` と `ssrImportedModules` のリストで接続されていました（ただし、それぞれに対して単一の `importers` リストが維持されていました）。変換されたモジュールは `id` と `ssr` ブーリアンで表されていました。このブール値は、`server.moduleGraph.getModuleByUrl(url, ssr)` や `server.transformRequest(url, { ssr })` などの API に渡す必要がありました。 26 | 27 | Vite v6 では、任意の数のカスタム環境（`client`、`ssr`、`edge` など）を作成できるようになりました。単一の `ssr` ブール値では不十分になりました。API を `server.transformRequest(url, { environment })` という形式に変更する代わりに、これらのメソッドを環境インスタンスに移動し、Vite 開発サーバーなしで呼び出せるようにしました。 28 | 29 | ## 移行ガイド 30 | 31 | - `server.moduleGraph` -> [`environment.moduleGraph`](/guide/api-environment#separate-module-graphs) 32 | - `server.transformRequest(url, ssr)` -> `environment.transformRequest(url)` 33 | - `server.warmupRequest(url, ssr)` -> `environment.warmupRequest(url)` 34 | -------------------------------------------------------------------------------- /changes/shared-plugins-during-build.md: -------------------------------------------------------------------------------- 1 | # ビルド時の共有プラグイン 2 | 3 | ::: tip フィードバック 4 | [Environment API feedback discussion](https://github.com/vitejs/vite/discussions/16358)でフィードバックをお寄せください。 5 | ::: 6 | 7 | [ビルド時の共有プラグイン](/guide/api-environment-plugins.md#shared-plugins-during-build)を参照してください。 8 | 9 | 影響範囲: `Vite プラグイン作成者` 10 | 11 | ::: warning 将来のデフォルト変更 12 | `builder.sharedConfigBuild` は `v6.0` で初めて導入されました。これを true に設定することで、プラグインが共有コンフィグでどのように動作するかをチェックできます。プラグインエコシステムの準備が整ったら、将来のメジャーバージョンでデフォルトを変更するためのフィードバックを求めています。 13 | ::: 14 | 15 | ## 動機 16 | 17 | 開発とビルドのプラグインパイプラインを調整します。 18 | 19 | ## 移行ガイド 20 | 21 | 環境をまたいでプラグインを共有できるようにするには、プラグインの状態を現在の環境でキー付けする必要があります。以下の形式のプラグインは、すべての環境における変換されたモジュールの数を数えます。 22 | 23 | ```js 24 | function CountTransformedModulesPlugin() { 25 | let transformedModules 26 | return { 27 | name: 'count-transformed-modules', 28 | buildStart() { 29 | transformedModules = 0 30 | }, 31 | transform(id) { 32 | transformedModules++ 33 | }, 34 | buildEnd() { 35 | console.log(transformedModules) 36 | }, 37 | } 38 | } 39 | ``` 40 | 41 | 代わりに、各環境で変換されたモジュールの数を数えたい場合は、マップを保持する必要があります。 42 | 43 | ```js 44 | function PerEnvironmentCountTransformedModulesPlugin() { 45 | const state = new Map() 46 | return { 47 | name: 'count-transformed-modules', 48 | perEnvironmentStartEndDuringDev: true, 49 | buildStart() { 50 | state.set(this.environment, { count: 0 }) 51 | } 52 | transform(id) { 53 | state.get(this.environment).count++ 54 | }, 55 | buildEnd() { 56 | console.log(this.environment.name, state.get(this.environment).count) 57 | } 58 | } 59 | } 60 | ``` 61 | 62 | このパターンを簡素化するために、Vite は `perEnvironmentState` ヘルパーをエクスポートしています: 63 | 64 | ```js 65 | function PerEnvironmentCountTransformedModulesPlugin() { 66 | const state = perEnvironmentState<{ count: number }>(() => ({ count: 0 })) 67 | return { 68 | name: 'count-transformed-modules', 69 | perEnvironmentStartEndDuringDev: true, 70 | buildStart() { 71 | state(this).count = 0 72 | } 73 | transform(id) { 74 | state(this).count++ 75 | }, 76 | buildEnd() { 77 | console.log(this.environment.name, state(this).count) 78 | } 79 | } 80 | } 81 | ``` 82 | -------------------------------------------------------------------------------- /changes/ssr-using-modulerunner.md: -------------------------------------------------------------------------------- 1 | # `ModuleRunner` API を使った SSR 2 | 3 | ::: tip フィードバック 4 | [Environment API feedback discussion](https://github.com/vitejs/vite/discussions/16358)でフィードバックをお寄せください。 5 | ::: 6 | 7 | `server.ssrLoadModule` は [Module Runner](/guide/api-environment#modulerunner) からのインポートに置き換えられました。 8 | 9 | 影響範囲: `Vite プラグイン作成者` 10 | 11 | ::: warning 将来の廃止予定 12 | `ModuleRunner` は `v6.0` で初めて導入されました。`server.ssrLoadModule` の廃止は将来のメジャーバージョンで予定されています。使用状況を明確にするため、vite config で `future.removeSsrLoadModule` を `"warn"` に設定してください。 13 | ::: 14 | 15 | ## 動機 16 | 17 | `server.ssrLoadModule(url)` は `ssr` 環境でのモジュールインポートのみを許可し、Vite 開発サーバーと同じプロセスでのみモジュールを実行できます。カスタム環境を持つアプリケーションでは、各環境は `ModuleRunner` と関連付けられ、個別のスレッドまたはプロセスで実行される場合があります。モジュールをインポートするには、`moduleRunner.import(url)` を使用します。 18 | 19 | ## 移行ガイド 20 | 21 | [Environment API フレームワークガイド](../guide/api-environment-frameworks.md)をご覧ください。 22 | -------------------------------------------------------------------------------- /changes/this-environment-in-hooks.md: -------------------------------------------------------------------------------- 1 | # フック内の `this.environment` 2 | 3 | ::: tip フィードバック 4 | [Environment API feedback discussion](https://github.com/vitejs/vite/discussions/16358)でフィードバックをお寄せください。 5 | ::: 6 | 7 | Vite 6 以前は `client` と `ssr` という 2 つの環境しか利用できませんでした。`resolveId`、`load`、`transform` プラグインフックの `options.ssr` 引数によって、プラグインフックでモジュールを処理する際に、プラグイン作成者はこの 2 つの環境を区別することができました。Vite 6 では、Vite アプリケーションは必要に応じて任意の数の名前付き環境を定義できます。プラグインコンテキストに `this.environment` を導入し、フック内で現在のモジュールの環境と対話できるようにします。 8 | 9 | 影響範囲: `Vite プラグイン作成者` 10 | 11 | ::: warning 将来の廃止予定 12 | `this.environment` は `v6.0` で導入されました。`options.ssr` の廃止は将来のメジャーバージョンで予定されています。その時点で、新しい API を使うようにプラグインを移行することを推奨します。使用状況を明確にするために、vite の設定で `future.removePluginHookSsrArgument` を `"warn"` に設定してください。 13 | ::: 14 | 15 | ## 動機 16 | 17 | `this.environment` はプラグインフックの実装に現在の環境名を知らせるだけでなく、環境設定オプション、モジュールグラフ情報、トランスフォームパイプライン (`environment.config`, `environment.moduleGraph`, `environment.transformRequest()`) にもアクセスできるようにします。環境インスタンスをコンテキストで利用できるようにすることで、プラグイン作成者は開発サーバー全体への依存を避けることができます（通常は `configureServer` フックによって起動時にキャッシュされます）。 18 | 19 | ## 移行ガイド 20 | 21 | 既存のプラグインを素早くマイグレーションするには、`resolveId`、`load`、`transform` フックの `options.ssr` 引数を `this.environment.config.consumer === 'server'` に置き換えてください: 22 | 23 | ```ts 24 | import { Plugin } from 'vite' 25 | 26 | export function myPlugin(): Plugin { 27 | return { 28 | name: 'my-plugin', 29 | resolveId(id, importer, options) { 30 | const isSSR = options.ssr // [!code --] 31 | const isSSR = this.environment.config.consumer === 'server' // [!code ++] 32 | 33 | if (isSSR) { 34 | // SSR 固有のロジック 35 | } else { 36 | // クライアント固有のロジック 37 | } 38 | }, 39 | } 40 | } 41 | ``` 42 | 43 | より堅牢で長期的な実装のために、プラグインフックは環境名に依存するのではなく、きめ細かい環境オプションを使って[複数の環境](/guide/api-environment.html#accessing-the-current-environment-in-hooks)を扱うべきです。 44 | -------------------------------------------------------------------------------- /config/dep-optimization-options.md: -------------------------------------------------------------------------------- 1 | # 依存関係の最適化オプション 2 | 3 | - **関連:** [依存関係の事前バンドル](/guide/dep-pre-bundling) 4 | 5 | 特に記載がない限り、このセクションのオプションは、開発時にだけ使用される依存関係の最適化にのみ適用されます。 6 | 7 | ## optimizeDeps.entries 8 | 9 | - **型:** `string | string[]` 10 | 11 | デフォルトでは、Vite はすべての `.html` ファイルをクロールして、事前にバンドルする必要のある依存関係を検出します（`node_modules`, `build.outDir`, `__tests__` および `coverage` は無視します）。`build.rollupOptions.input` が指定されている場合、Vite は代わりにそれらのエントリーポイントをクロールします。 12 | 13 | これらのいずれもニーズに合わない場合、このオプションを使ってカスタムエントリーを指定することができます。値は Vite プロジェクトルートからの相対的な [`tinyglobby` パターン](https://github.com/SuperchupuDev/tinyglobby) か、パターンの配列でなければいけません。これによりデフォルトのエントリーの推論が上書きされます。`optimizeDeps.entries` が明示的に定義されている場合、デフォルトでは `node_modules` と `build.outDir` フォルダーのみが無視されます。他のフォルダーを無視したい場合は、最初の `!` でマークした無視パターンをエントリーリストの一部として使用できます。`node_modules` を明示的に含むパターンに対しては、`node_modules` は無視されません。 14 | 15 | ## optimizeDeps.exclude 16 | 17 | - **型:** `string[]` 18 | 19 | 事前バンドルから除外する依存関係。 20 | 21 | :::warning CommonJS 22 | CommonJS の依存関係を最適化から除外してはいけません。ESM の依存関係が最適化から除外されているが、ネストされた CommonJS の依存関係がある場合は、CommonJS の依存関係を `optimizeDeps.include` に追加する必要があります。例: 23 | 24 | ```js twoslash 25 | import { defineConfig } from 'vite' 26 | // ---cut--- 27 | export default defineConfig({ 28 | optimizeDeps: { 29 | include: ['esm-dep > cjs-dep'], 30 | }, 31 | }) 32 | ``` 33 | 34 | ::: 35 | 36 | ## optimizeDeps.include 37 | 38 | - **型:** `string[]` 39 | 40 | デフォルトでは、リンクされたパッケージのうち `node_modules` の外にあるものは事前バンドルされません。このオプションを使用してリンクされたパッケージを強制的に事前バンドルします。 41 | 42 | **実験的機能:** 多くのディープインポートを持つライブラリーを使用している場合、末尾に glob パターンを指定して、すべてのディープインポートを一度に事前バンドルすることもできます。これにより、新たにディープインポートが使用されるたびに常に事前バンドルされることを避けることができます。[フィードバックをしてください](https://github.com/vitejs/vite/discussions/15833)。例: 43 | 44 | ```js twoslash 45 | import { defineConfig } from 'vite' 46 | // ---cut--- 47 | export default defineConfig({ 48 | optimizeDeps: { 49 | include: ["my-lib/components/**/*.vue"], 50 | }, 51 | }); 52 | ``` 53 | 54 | ## optimizeDeps.esbuildOptions 55 | 56 | - **型:** [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<`[`EsbuildBuildOptions`](https://esbuild.github.io/api/#general-options)`, 57 | | 'bundle' 58 | | 'entryPoints' 59 | | 'external' 60 | | 'write' 61 | | 'watch' 62 | | 'outdir' 63 | | 'outfile' 64 | | 'outbase' 65 | | 'outExtension' 66 | | 'metafile'>` 67 | 68 | 依存関係のスキャンと最適化の際、 esbuild に渡すオプション。 69 | 70 | いくつかのオプションは、変更すると Vite の依存関係の最適化と互換性がなくなるため、省略されています。 71 | 72 | - `external` も省略されています。Vite の `optimizeDeps.exclude` オプションを使用してください 73 | - `plugins` は Vite の依存関係プラグインとマージされます 74 | 75 | ## optimizeDeps.force 76 | 77 | - **型:** `boolean` 78 | 79 | `true` に設定すると、前にキャッシュされた最適化された依存関係を無視して、依存関係の事前バンドルをするよう強制します。 80 | 81 | ## optimizeDeps.noDiscovery 82 | 83 | - **型:** `boolean` 84 | - **デフォルト:** `false` 85 | 86 | `true` に設定すると、自動的な依存関係の発見が無効化され、`optimizeDeps.include` に指定された依存関係だけが最適化されます。CJS のみの依存関係は、開発中に `optimizeDeps.include` に存在している必要があります。 87 | 88 | ## optimizeDeps.holdUntilCrawlEnd 89 | 90 | - **実験的機能:** [フィードバックをしてください](https://github.com/vitejs/vite/discussions/15834) 91 | - **型:** `boolean` 92 | - **デフォルト:** `true` 93 | 94 | 有効化すると、コールドスタート時にすべての静的インポートがクロールされるまで、最初に最適化された依存関係の結果を保持します。これにより、新しい依存関係が発見されて、それが新しい共通チャンクの生成をトリガーしたときに、ページ全体をリロードする必要がなくなります。もしすべての依存関係が `include` で明示的に定義されていて、それらがすべてスキャナーで検出された場合は、このオプションを無効化して、ブラウザープロセスがより多くのリクエストを並列に処理できるようにすることをおすすめします。 95 | 96 | ## optimizeDeps.disabled 97 | 98 | - **非推奨** 99 | - **実験的機能:** [フィードバックをしてください](https://github.com/vitejs/vite/discussions/13839) 100 | - **型:** `boolean | 'build' | 'dev'` 101 | - **デフォルト:** `'build'` 102 | 103 | このオプションは非推奨です。Vite 5.1 時点で、ビルド中の依存関係の事前バンドルは削除されています。`optimizeDeps.disabled` を `true` または `'dev'` に設定するとオプティマイザーが無効になり、`false` または `'build'` に設定すると開発中のオプティマイザーは有効のままになります。 104 | 105 | オプティマイザーを完全に無効化するには、`optimizeDeps.noDiscovery: true` を使用して依存関係の自動検出を禁止し、`optimizeDeps.include` を undefined または空のままにしてください。 106 | 107 | :::warning 108 | ビルド時の依存関係の最適化は**実験的な**機能でした。この戦略を試したプロジェクトでは、`build.commonjsOptions: { include: [] }` を使用して `@rollup/plugin-commonjs` も削除しました。もし削除していた場合、バンドル中に CJS のみのパッケージをサポートするために、再び有効にするよう警告が表示されます。 109 | ::: 110 | 111 | ## optimizeDeps.needsInterop 112 | 113 | - **実験的機能** 114 | - **型:** `string[]` 115 | 116 | 依存関係をインポートする際に、ESM の相互作用を強制します。Vite は依存関係が相互作用を必要とする場合に適切に検出することができるため、このオプションは一般的には必要ありません。しかし、依存関係の組み合わせが異なると、いくつかのパッケージが異なる形で事前にバンドルされる可能性があります。これらのパッケージを `needsInterop` に追加すると、全ページの再読み込みを回避してコールドスタートを高速化することができます。依存関係のあるパッケージがそうである場合、警告が表示され、パッケージ名を設定内のこの配列に追加するよう提案されます。 117 | -------------------------------------------------------------------------------- /config/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vite の設定 3 | --- 4 | 5 | # Vite の設定 {#configuring-vite} 6 | 7 | コマンドラインから `vite` を実行すると、Vite は[プロジェクトルート](/guide/#index-html-and-project-root)内の `vite.config.js` という名前の設定ファイルを自動的に解決しようとします（その他の JS および TS の拡張子もサポートされています）。 8 | 9 | 最も基本的な設定ファイルは次のようになります: 10 | 11 | ```js [vite.config.js] 12 | export default { 13 | // 設定オプション 14 | } 15 | ``` 16 | 17 | `package.json` に `"type": "module"` などでプロジェクトがネイティブな Node ESM を使用していない場合でも、Vite は設定ファイルで ES モジュール構文の使用をサポートしています。この場合、設定ファイルはロードの前に自動的に前処理されます。 18 | 19 | また、CLI の `--config` オプションで、使用するコンフィグファイルを明示的に指定することもできます（`cwd` からの相対的な解決）: 20 | 21 | ```bash 22 | vite --config my-config.js 23 | ``` 24 | 25 | ::: tip 設定の読み込み 26 | デフォルトでは、Vite は `esbuild` を使用して設定を一時ファイルにバンドルし、読み込みます。これはモノレポ内で TypeScript をインポートする際に問題を引き起こす可能性があります。このアプローチで問題が起きた場合は、代わりに [module runner](/guide/api-environment-runtimes.html#modulerunner) を使用するように `--configLoader runner` を指定できます。これにより、一時的な設定が作成されなくなり、すべてのファイルがその場で変換されるようになります。モジュールランナーは設定ファイル内では CJS をサポートしていませんが、外部の CJS パッケージは通常通りに機能するはずです。 27 | 28 | あるいは、TypeScript をサポートする環境（例：`node --experimental-strip-types`）を使用している場合、またはプレーンな JavaScript のみを記述している場合は、`--configLoader native` を指定して、環境のネイティブランタイムを使用して設定ファイルを読み込むことができます。設定ファイルによってインポートされたモジュールの更新は検出されないため、Vite サーバーは自動的に再起動されないことに注意してください。 29 | ::: 30 | 31 | ## 設定の自動補完 32 | 33 | Vite には TypeScript の型が同梱されているので、jsdoc のタイプヒントを使って IDE の自動補完を活用できます: 34 | 35 | ```js 36 | /** @type {import('vite').UserConfig} */ 37 | export default { 38 | // ... 39 | } 40 | ``` 41 | 42 | あるいは、jsdoc のアノテーションがなくても自動補完を提供する `defineConfig` ヘルパーを使用することもできます: 43 | 44 | ```js 45 | import { defineConfig } from 'vite' 46 | 47 | export default defineConfig({ 48 | // ... 49 | }) 50 | ``` 51 | 52 | Vite は TypeScript の設定ファイルもサポートしています。`vite.config.ts` は、上記の `defineConfig` ヘルパー関数または `satisfies` 演算子とともに使用できます: 53 | 54 | ```ts 55 | import type { UserConfig } from 'vite' 56 | 57 | export default { 58 | // ... 59 | } satisfies UserConfig 60 | ``` 61 | 62 | ## 条件付き設定 63 | 64 | 設定がコマンド（`serve` や `build`）、使用されている[モード](/guide/env-and-mode#modes)、SSR ビルドかどうか（`isSsrBuild`）、ビルドのプレビューかどうか（`isPreview`）に基づいて条件付きで設定のオプションを決定する必要がある場合は、代わりに関数をエクスポートできます: 65 | 66 | ```js twoslash 67 | import { defineConfig } from 'vite' 68 | // ---cut--- 69 | export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => { 70 | if (command === 'serve') { 71 | return { 72 | // dev 固有の設定 73 | } 74 | } else { 75 | // command === 'build' 76 | return { 77 | // build 固有の設定 78 | } 79 | } 80 | }) 81 | ``` 82 | 83 | Vite の API において `command` の値は、開発時（CLI で [`vite`](/guide/cli#vite)、`vite dev`、`vite serve` がエイリアス）には `serve` となり、本番用にビルド（[`vite build`](/guide/cli#vite-build)）するときには `build` となることに注意してください。 84 | 85 | `isSsrBuild` と `isPreview` はそれぞれ `build` コマンドと `serve` コマンドの種類を区別するための追加のオプションフラグです。Vite の設定を読み込むツールの中には、これらのフラグをサポートしておらず、代わりに `undefined` を渡すものもあります。そのため、明示的に `true` と `false` を比較することをおすすめします。 86 | 87 | ## 非同期の設定 88 | 89 | 設定で非同期の関数を呼び出す必要がある場合は、代わりに非同期関数をエクスポートできます。また、この非同期関数は `defineConfig` を通じて渡すことができ、自動補完のサポートを向上させることができます: 90 | 91 | ```js twoslash 92 | import { defineConfig } from 'vite' 93 | // ---cut--- 94 | export default defineConfig(async ({ command, mode }) => { 95 | const data = await asyncFunction() 96 | return { 97 | // vite の設定 98 | } 99 | }) 100 | ``` 101 | 102 | ## 環境変数を設定に使用する 103 | 104 | 通常通り、環境変数は `process.env` から取得することができます。 105 | 106 | Vite はデフォルトでは `.env` ファイルをロードしないことに注意してください。ロードするファイルは Vite の設定を評価した後に決定されるからです。例えば、 `root` と `envDir` オプションはロードの動作に影響します。しかし必要に応じて、エクスポートされた `loadEnv` ヘルパーを使用して、特定の `.env` ファイルをロードすることができます。 107 | 108 | ```js twoslash 109 | import { defineConfig, loadEnv } from 'vite' 110 | 111 | export default defineConfig(({ mode }) => { 112 | // `mode` に基づいて現在の作業ディレクトリーにある env ファイルをロードする。 113 | // `VITE_` プレフィックスに関係なく全ての環境変数をロードするには、 114 | // 第 3 引数に '' を設定します 115 | const env = loadEnv(mode, process.cwd(), '') 116 | return { 117 | // vite の設定 118 | define: { 119 | __APP_ENV__: JSON.stringify(env.APP_ENV), 120 | }, 121 | } 122 | }) 123 | ``` 124 | 125 | ## VS Code で設定ファイルをデバッグする 126 | 127 | デフォルトの `--configLoader bundle` の動作では、Vite は生成された一時的な設定ファイルを `node_modules/.vite-temp` フォルダーに書き込むため、Vite の設定ファイル内でブレークポイントデバッグを設定するときにファイルが見つからないというエラーが発生します。この問題を修正するには、`.vscode/settings.json` に以下の設定を追加してください: 128 | 129 | ```json 130 | { 131 | "debug.javascript.terminalOptions": { 132 | "resolveSourceMapLocations": [ 133 | "${workspaceFolder}/**", 134 | "!**/node_modules/**", 135 | "**/node_modules/.vite-temp/**" 136 | ] 137 | } 138 | } 139 | ``` 140 | -------------------------------------------------------------------------------- /config/preview-options.md: -------------------------------------------------------------------------------- 1 | # プレビューのオプション 2 | 3 | 特に記載がない限り、このセクションのオプションはプレビューにのみ適用されます。 4 | 5 | ## preview.host 6 | 7 | - **型:** `string | boolean` 8 | - **デフォルト:** [`server.host`](./server-options#server_host) 9 | 10 | サーバーがリッスンすべき IP アドレスを指定します。 11 | `0.0.0.0` または `true` に設定すると、LAN やパブリックアドレスを含むすべてのアドレスをリッスンします。 12 | 13 | これは CLI で `--host 0.0.0.0` や `--host` を使用して設定できます。 14 | 15 | :::tip 注意 16 | 17 | Vite ではなく他のサーバーがレスポンスを返す場合があります。 18 | 詳細は [`server.host`](./server-options.md#server-host) をご覧ください。 19 | 20 | ::: 21 | 22 | ## preview.allowedHosts 23 | 24 | - **型:** `string | true` 25 | - **デフォルト:** [`server.allowedHosts`](./server-options#server-allowedhosts) 26 | 27 | Vite が応答することを許可するホスト名。 28 | 29 | 詳細は [`server.allowedHosts`](./server-options#server-allowedhosts) を参照してください。 30 | 31 | ## preview.port 32 | 33 | - **型:** `number` 34 | - **デフォルト:** `4173` 35 | 36 | サーバーのポートを指定します。このポートがすでに使用されている場合、Vite は次に使用可能なポートを自動的に試すので、サーバーが最終的にリッスンする実際のポートとは異なる場合があることに注意してください。 37 | 38 | **例:** 39 | 40 | ```js 41 | export default defineConfig({ 42 | server: { 43 | port: 3030, 44 | }, 45 | preview: { 46 | port: 8080, 47 | }, 48 | }) 49 | ``` 50 | 51 | ## preview.strictPort 52 | 53 | - **型:** `boolean` 54 | - **デフォルト:** [`server.strictPort`](./server-options#server-strictport) 55 | 56 | `true` に設定すると、ポートがすでに使用されている場合に、次に使用可能なポートを自動的に試すことなく終了します。 57 | 58 | ## preview.https 59 | 60 | - **型:** `https.ServerOptions` 61 | - **デフォルト:** [`server.https`](./server-options#server-https) 62 | 63 | TLS + HTTP/2 を有効にします。 64 | 65 | 詳しくは [`server.https`](./server-options#server-https) を参照してください。 66 | 67 | ## preview.open 68 | 69 | - **型:** `boolean | string` 70 | - **デフォルト:** [`server.open`](./server-options#server-open) 71 | 72 | サーバー起動時に自動的にブラウザーでアプリを開きます。値が文字列の場合、URL のパス名として使用されます。もしあなたの好きなブラウザーでアプリを開きたい場合、環境変数 `process.env.BROWSER`（例: `firefox`）を定義できます。詳細は [`open` パッケージ](https://github.com/sindresorhus/open#app) をご覧ください。また、`process.env.BROWSER_ARGS` を設定して、追加の引数を渡すこともできます（例: `--incognito`）。 73 | 74 | また、`BROWSER` と `BROWSER_ARGS` は `.env` ファイルで設定できる特別な環境変数です。詳しくは [`open` パッケージ](https://github.com/sindresorhus/open#app) を参照してください。 75 | 76 | ## preview.proxy 77 | 78 | - **型:** `Record` 79 | - **デフォルト:** [`server.proxy`](./server-options#server-proxy) 80 | 81 | プレビューサーバーのカスタムプロキシのルールを設定します。`{ key: options }` のペアのオブジェクトが必要です。キーが `^` で始まる場合は `RegExp` として解釈されます。プロキシのインスタンスにアクセスするには `configure` オプションを使用します。 82 | 83 | [`http-proxy`](https://github.com/http-party/node-http-proxy) を使用します。全オプションは[こちら](https://github.com/http-party/node-http-proxy#options)。 84 | 85 | ## preview.cors 86 | 87 | - **型:** `boolean | CorsOptions` 88 | - **デフォルト:** [`server.cors`](./server-options#server-cors) 89 | 90 | プレビューサーバーの CORS を設定します。 91 | 92 | 詳細は [`server.cors`](./server-options#server-cors) をご覧ください。 93 | 94 | ## preview.headers 95 | 96 | - **型:** `OutgoingHttpHeaders` 97 | 98 | サーバーのレスポンスヘッダーを指定します。 99 | -------------------------------------------------------------------------------- /config/ssr-options.md: -------------------------------------------------------------------------------- 1 | # SSR オプション 2 | 3 | 特に記載がない限り、このセクションのオプションは開発とビルドの両方に適用されます。 4 | 5 | ## ssr.external 6 | 7 | - **型:** `string[] | true` 8 | - **関連:** [外部 SSR](/guide/ssr#ssr-externals) 9 | 10 | SSR 用の指定された依存関係と、その遷移的な（transitive）依存関係を外部化します。デフォルトでは、（HMR のために）リンクされた依存関係を除いて、すべての依存関係が外部化されます。リンクされた依存関係を外部化したい場合、その名前をこのオプションに渡せます。 11 | 12 | `true` の場合、リンクされた依存関係を含むすべての依存関係が外部化されます。 13 | 14 | `ssr.noExternal` に（任意の型を使用して）リストされた場合でも、（`string[]` 型を使用して）明示的にリストされた依存関係が常に優先されることに注意してください。 15 | 16 | ## ssr.noExternal 17 | 18 | - **型:** `string | RegExp | (string | RegExp)[] | true` 19 | - **関連:** [外部 SSR](/guide/ssr#ssr-externals) 20 | 21 | 指定した依存関係が SSR のために外部化されるのを防ぎます。もし外部化された場合、依存関係はビルドにバンドルされます。デフォルトでは、（HMR のために）リンクされた依存関係だけが外部化されません。リンクされた依存関係を外部化したい場合は、その名前を `ssr.external` オプションに渡せます。 22 | 23 | `true` の場合、どの依存関係も外部化されません。ただし、（`string[]` 型を使用して）`ssr.external` に明示的にリストされた依存関係は優先され、依然として外部化されます。`ssr.target: 'node'` が設定された場合、Node.js のビルトインもデフォルトで外部化されます。 24 | 25 | `ssr.noExternal: true` と `ssr.external: true` の両方が設定された場合、`ssr.noExternal` が優先され、どの依存関係も外部化されないことに注意してください。 26 | 27 | ## ssr.target 28 | 29 | - **型:** `'node' | 'webworker'` 30 | - **デフォルト:** `node` 31 | 32 | SSR サーバーのビルドターゲット。 33 | 34 | ## ssr.resolve.conditions 35 | 36 | - **型:** `string[]` 37 | - **デフォルト:** `['module', 'node', 'development|production']` (`defaultServerConditions`)（`ssr.target === 'webworker'` の場合は `['module', 'browser', 'development|production']` (`defaultClientConditions`)） 38 | - **関連:** [Resolve Conditions](./shared-options.md#resolve-conditions) 39 | 40 | これらの条件はプラグインパイプラインで使用され、SSR ビルド時に外部化されていない依存関係にのみ影響します。外部化されたインポートに影響を与えるには `ssr.resolve.externalConditions` を使用してください。 41 | 42 | ## ssr.resolve.externalConditions 43 | 44 | - **型:** `string[]` 45 | - **デフォルト:** `['node']` 46 | 47 | 外部化された直接の依存関係（Vite にインポートされた外部の依存関係）の SSR インポート（`ssrLoadModule` を含む）の際に使用される条件。 48 | 49 | :::tip 50 | 51 | このオプションを使用する場合、一貫性のある動作のために、開発時とビルド時の両方で同じ値を使用して [`--conditions` フラグ](https://nodejs.org/docs/latest/api/cli.html#-c-condition---conditionscondition) 付きで Node を実行してください。 52 | 53 | たとえば、`['node', 'custom']` と設定した場合には、開発時には `NODE_OPTIONS='--conditions custom' vite`、ビルド後には `NODE_OPTIONS="--conditions custom" node ./dist/server.js` を実行する必要があります。 54 | 55 | ::: 56 | 57 | ### ssr.resolve.mainFields 58 | 59 | - **型:** `string[]` 60 | - **デフォルト:** `['module', 'jsnext:main', 'jsnext']` 61 | 62 | パッケージのエントリーポイントを解決する際に試す `package.json` のフィールドのリスト。これは、`exports` フィールドから解決される条件付きエクスポートよりも優先順位が低くなることに注意してください。エントリーポイントが `exports` から正常に解決された場合、メインフィールドは無視されます。この設定は、外部化されていない依存関係のみに影響します。 63 | -------------------------------------------------------------------------------- /config/worker-options.md: -------------------------------------------------------------------------------- 1 | # ワーカーのオプション 2 | 3 | 特に記載がない限り、このセクションのオプションは開発、ビルド、プレビューのすべてに適用されます。 4 | 5 | ## worker.format 6 | 7 | - **型:** `'es' | 'iife'` 8 | - **デフォルト:** `'iife'` 9 | 10 | ワーカーバンドルの出力形式。 11 | 12 | ## worker.plugins 13 | 14 | - **型:** [`() => (Plugin | Plugin[])[]`](./shared-options#plugins) 15 | 16 | ワーカーバンドルに適用される Vite プラグイン。[config.plugins](./shared-options#plugins) は開発時のワーカーのみに適用されるため、ビルドの場合はここで設定する必要があることに注意してください。 17 | この関数は、rollup ワーカーを並行してビルドする際に使用される新しいプラグインインスタンスを返す必要があります。そのため、 `config` フックの `config.worker` オプションの変更は無視されます。 18 | 19 | ## worker.rollupOptions 20 | 21 | - **型:** [`RollupOptions`](https://rollupjs.org/configuration-options/) 22 | 23 | ワーカーバンドルをビルドするための Rollup オプション。 24 | -------------------------------------------------------------------------------- /guide/assets.md: -------------------------------------------------------------------------------- 1 | # 静的アセットの取り扱い 2 | 3 | - 関連: [Public Base Path](./build#public-base-path) 4 | - 関連: [`assetsInclude` 設定オプション](/config/shared-options.md#assetsinclude) 5 | 6 | ## Importing Asset as URL 7 | 8 | 静的アセットをインポートすると、配信された際に解決されたパブリックな URL が返されます: 9 | 10 | ```js twoslash 11 | import 'vite/client' 12 | // ---cut--- 13 | import imgUrl from './img.png' 14 | document.getElementById('hero-img').src = imgUrl 15 | ``` 16 | 17 | 例えば、 `imgUrl` は、開発中は `/src/img.png` となり、本番用ビルドでは `/assets/img.2d8efhg.png` となります。 18 | 19 | 振る舞いは webpack の `file-loader` に似ています。異なるのは、絶対的なパブリックパス（開発中のプロジェクトのルートに基づく）または、相対パスを使用することができるという点です。 20 | 21 | - CSS 内の `url()` の参照も同様に扱われます。 22 | 23 | - Vue プラグインを使用している場合、 Vue の SFC テンプレート内の asset references も自動的にインポートに変換されます。 24 | 25 | - 一般的な画像、メディア、フォントなどの拡張子は自動的にアセットとして検出されます。また、[`assetsInclude` オプション](/config/shared-options.md#assetsinclude) で内部リストを拡張することができます。 26 | 27 | - 参照されたアセットは build assets graph の一部として含まれ、ハッシュ化されたファイル名を取得し、プラグインを用いて最適化されます。 28 | 29 | - [`assetsInlineLimit` オプション](/config/build-options.md#build-assetsinlinelimit) で指定したバイト数よりも小さいアセットは base64 データの URL としてインライン化されます 30 | 31 | - Git LFS のプレースホルダーは、それが表すファイルの内容を含んでいないため、自動的にインライン化の対象から除外されます。インライン化するには、ビルドする前に必ずファイルの内容を Git LFS 経由でダウンロードするようにしてください。 32 | 33 | - TypeScript はデフォルトでは静的アセットのインポートを有効なモジュールとして認識しません。これを修正するには、[`vite/client`](./features#client-types)を追加します。 34 | 35 | ::: tip `url()` を用いた SVG のインライン化 36 | SVG の URL を JS により手動で構築した `url()` に渡すときには、変数をダブルクオートで囲む必要があります。 37 | 38 | ```js twoslash 39 | import 'vite/client' 40 | // ---cut--- 41 | import imgUrl from './img.svg' 42 | document.getElementById('hero-img').style.background = `url("${imgUrl}")` 43 | ``` 44 | 45 | ::: 46 | 47 | ### 明示的な URL のインポート {#explicit-url-imports} 48 | 49 | 内部リストや `assetsInclude` に含まれていないアセットは URL の末尾に `?url` を付与することで明示的にインポートできます。これは、例えば [Houdini Paint Worklets](https://developer.mozilla.org/ja/docs/Web/API/CSS/paintWorklet_static) をインポートするときに便利です。 50 | 51 | ```js twoslash 52 | import 'vite/client' 53 | // ---cut--- 54 | import workletURL from 'extra-scalloped-border/worklet.js?url' 55 | CSS.paintWorklet.addModule(workletURL) 56 | ``` 57 | 58 | ### 明示的なインライン処理 59 | 60 | アセットは、`?inline` または `?no-inline` 接尾辞を使用することで、それぞれインラインまたは非インラインで明示的にインポートできます。 61 | 62 | ```js twoslash 63 | import 'vite/client' 64 | // ---cut--- 65 | import imgUrl1 from './img.svg?no-inline' 66 | import imgUrl2 from './img.png?inline' 67 | ``` 68 | 69 | ### アセットを文字列としてインポートする {#importing-asset-as-string} 70 | 71 | アセットは末尾に `?raw` を付与することで文字列としてインポートすることができます。 72 | 73 | ```js twoslash 74 | import 'vite/client' 75 | // ---cut--- 76 | import shaderString from './shader.glsl?raw' 77 | ``` 78 | 79 | ### スクリプトを Worker としてインポートする 80 | 81 | スクリプトは末尾に `?worker` もしくは `?sharedworker` を付与することで web workers としてインポートすることができます。 82 | 83 | ```js twoslash 84 | import 'vite/client' 85 | // ---cut--- 86 | // Separate chunk in the production build 87 | import Worker from './shader.js?worker' 88 | const worker = new Worker() 89 | ``` 90 | 91 | ```js twoslash 92 | import 'vite/client' 93 | // ---cut--- 94 | // sharedworker 95 | import SharedWorker from './shader.js?sharedworker' 96 | const sharedWorker = new SharedWorker() 97 | ``` 98 | 99 | ```js twoslash 100 | import 'vite/client' 101 | // ---cut--- 102 | // Inlined as base64 strings 103 | import InlineWorker from './shader.js?worker&inline' 104 | ``` 105 | 106 | 詳細は [Web Worker section](./features.md#web-workers) を参照してください。 107 | 108 | ## `public` ディレクトリー {#the-public-directory} 109 | 110 | アセットが以下のような場合のとき: 111 | 112 | - ソースコードで参照されない（例： `robots.txt`） 113 | - 全く同じファイル名を保持する必要がある（ハッシュ化しない） 114 | - …または、アセットの URL を取得するためだけに、アセットのインポートを単純に書きたくない 115 | 116 | そのとき、プロジェクトのルート配下の特別な `public` ディレクトリーにアセットを置くことができます。このディレクトリーに配置されたアセットは開発環境ではルートパス `/` で提供され、そのまま dist ディレクトリーのルートにコピーされます。 117 | 118 | ディレクトリーのデフォルトは `/public` ですが、 [`publicDir` オプション](/config/shared-options.md#publicdir) で設定することができます。 119 | 120 | `public` アセットは常にルート絶対パスを使用して参照する必要があることに注意してください。たとえば、`public/icon.png` はソースコード内で `/icon.png` として参照する必要があります。 121 | 122 | ## new URL(url, import.meta.url) 123 | 124 | [import.meta.url](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import.meta) は現在のモジュールの URL を公開するネイティブ ESM の機能です。ネイティブの [URL コンストラクター](https://developer.mozilla.org/ja/docs/Web/API/URL)と組み合わせることで、JavaScript モジュールからの相対パスを使用して静的アセットの完全に解決された URL を取得できます: 125 | 126 | ```js 127 | const imgUrl = new URL('./img.png', import.meta.url).href 128 | 129 | document.getElementById('hero-img').src = imgUrl 130 | ``` 131 | 132 | これはモダンブラウザーでネイティブに動作します。実際、開発中に Vite はこのコードを処理する必要が全くありません！ 133 | 134 | このパターンはテンプレートリテラルによる動的な URL もサポートします: 135 | 136 | ```js 137 | function getImageUrl(name) { 138 | // サブディレクトリー内のファイルは含まれないことに注意してください 139 | return new URL(`./dir/${name}.png`, import.meta.url).href 140 | } 141 | ``` 142 | 143 | 本番環境では、バンドル後やアセットハッシュ化の後でも URL が正しい場所を指すように、Vite が必要な変換を行ないます。ただし、URL の文字列は解析できるように静的である必要があります。そうでない場合はコードがそのまま残ってしまい、`build.target` が `import.meta.url` をサポートしていない場合はランタイムエラーが発生する可能性があります。 144 | 145 | ```js 146 | // Vite はこれを変換しません 147 | const imgUrl = new URL(imagePath, import.meta.url).href 148 | ``` 149 | 150 | ::: details 動作の仕組み 151 | 152 | Vite は `getImageUrl` 関数を次のように変換します: 153 | 154 | ```js 155 | import __img0png from './dir/img0.png' 156 | import __img1png from './dir/img1.png' 157 | 158 | function getImageUrl(name) { 159 | const modules = { 160 | './dir/img0.png': __img0png, 161 | './dir/img1.png': __img1png, 162 | } 163 | return new URL(modules[`./dir/${name}.png`], import.meta.url).href 164 | } 165 | ``` 166 | 167 | ::: 168 | 169 | ::: warning SSR では動作しません 170 | ブラウザーと Node.js で `import.meta.url` のセマンティクスが異なるため、 このパターンは Vite をサーバーサイドレンダリングで使用している場合には動作しません。サーバーバンドルは事前にクライアントホストの URL を決定することもできません。 171 | ::: 172 | -------------------------------------------------------------------------------- /guide/dep-pre-bundling.md: -------------------------------------------------------------------------------- 1 | # 依存関係の事前バンドル 2 | 3 | 初めて、`vite` を実行すると、Vite は、あなたのサイトをローカルで読み込む前に、プロジェクトの依存関係を事前バンドルします。これはデフォルトで自動的に、かつ透過的に行われます。 4 | 5 | ## その理由は？ 6 | 7 | これは、Vite が「依存関係の事前バンドル」を実行しています。 8 | 9 | このプロセスには 2 つの目的があります: 10 | 11 | 1. **CommonJS と UMD の互換性:** 開発中の Vite のコードは ECMAScript モジュールとして提供しています。そのため、Vite は、CommonJS または、UMD を ESM に変換する必要があります。CommonJS の依存関係を変換する場合、Vite はインポート文をスマート分析を実行してエクスポートが動的に割り当てられていても、CommonJS モジュールは期待通りに動作します。（例 React）: 12 | 13 | ```js 14 | // works as expected 15 | import React, { useState } from 'react' 16 | ``` 17 | 18 | 2. **パフォーマンス:** Vite は、多くの内部モジュールを持つ ESM の依存関係を単一のモジュールに変換して、その後のページロードのパフォーマンスを向上させます。いくつかのパッケージでは、ECMAScript モジュールのビルドを、相互にインポートする別々のファイルとして出力します。 19 | 20 | 一例として [`lodash-es`](https://unpkg.com/browse/lodash-es/) には、600 以上の内部モジュールがあります。`import { debounce } from 'lodash-es'` をすると、ブラウザーは 600 以上の HTTP リクエストを同時に処理します！　サーバー側では問題なく処理していても、大量のリクエストによりブラウザー側でネットワークの混雑が発生し、ページの読み込みが著しく遅くなってしまいます。 21 | 22 | 事前に `lodash-es` を単一のモジュールにバンドルすることにより HTTP リクエストは 1 つだけで済むようになりました。 23 | 24 | ::: tip 注意 25 | 依存関係の事前バンドルは開発モードでのみ適用され、依存関係を ESM に変換するために `esbuild` を使用します。本番ビルドでは、代わりに `@rollup/plugin-commonjs` が使用されます。 26 | ::: 27 | 28 | ## 依存関係の自動検出 29 | 30 | 既存のキャッシュが見つからない場合、Vite はソースコードをクロールし、依存関係のインポート（すなわち、`node_modules` から解決されることを期待されている "bare imports"）を自動的に検出します。そして、検出されたインポートを事前バンドルのエントリーポイントとして使用します。事前バンドルは `esbuild` で実行されるので、例のごとく非常に高速です。 31 | 32 | サーバーを起動したあと、キャッシュにない新しい依存関係のインポートに遭遇した場合は、Vite は依存関係の事前バンドルを再実行し、必要に応じてページをリロードします。 33 | 34 | ## モノレポとリンクされた依存関係 35 | 36 | モノレポの設定では、依存関係は同じリポジトリーからのリンクされたパッケージの可能性があります。Vite は `node_modules` から解決されない依存関係を自動的に検出し、リンクされた依存関係をソースコードとして扱います。リンクされた依存関係をバンドルしようとはせず、代わりにリンクされた依存関係のリストを分析します。 37 | 38 | ただしこの場合、リンクされた依存関係が ESM としてエクスポートされている必要があります。そうでない場合は、[`optimizeDeps.include`](/config/dep-optimization-options.md#optimizedeps-include) と [`build.commonjsOptions.include`](/config/build-options.md#build-commonjsoptions) に依存関係を追加して、設定することができます。 39 | 40 | ```js twoslash [vite.config.js] 41 | import { defineConfig } from 'vite' 42 | // ---cut--- 43 | export default defineConfig({ 44 | optimizeDeps: { 45 | include: ['linked-dep'], 46 | }, 47 | build: { 48 | commonjsOptions: { 49 | include: [/linked-dep/, /node_modules/], 50 | }, 51 | }, 52 | }) 53 | ``` 54 | 55 | リンクされた依存関係を変更する場合は、`--force` コマンドラインオプションを指定して開発サーバーを再起動すると、変更が有効になります。 56 | 57 | ## 挙動のカスタマイズ 58 | 59 | デフォルトのヒューリスティックな方法による依存関係の発見によって、必ずしも望ましい結果が得られるとは限りません。リストから依存関係を明示的に含めたり除外したりする場合は、[`optimizeDeps` 設定オプション](/config/dep-optimization-options.md)を使用してください。 60 | 61 | `optimizeDeps.include` または `optimizeDeps.exclude` の一般的な使用例は、ソースコードで直接検出できないインポートがある場合です。たとえば、インポートはプラグイン変換の結果として作成される可能性があります。これは、Vite が最初のスキャンでインポートを検出できないことを意味します。つまり、ファイルがブラウザーによって要求されて変換された後にのみ、インポートを検出できます。 これにより、サーバーの起動後すぐにサーバーが再バンドルされます。 62 | 63 | これには、`include` と `exclude` の両方が使用できます。依存関係が大きい（多くの内部モジュールがある）場合や、CommonJS の場合には、それを含める必要があります。依存関係が小さく、すでに有効な ESM の場合には、それを除外し、ブラウザーに直接読み込ませることができます。 64 | 65 | esbuild も [`optimizeDeps.esbuildOptions` オプション](/config/dep-optimization-options.md#optimizedeps-esbuildoptions)でさらにカスタマイズできます。例えば、esbuild のプラグインを追加して、依存関係にある特殊なファイルを扱えるようにするか、[build `target`](https://esbuild.github.io/api/#target) を変更します。 66 | 67 | ## キャッシュ 68 | 69 | ### File System キャッシュ 70 | 71 | Vite は、`node_modules/.vite` に、事前バンドル済みの依存関係をキャッシュします。いくつかのソースに基づいて、事前バンドルを再実行する必要があるかどうか決定します: 72 | 73 | - パッケージマネージャーのロックファイルの内容、例： `package-lock.json`、`yarn.lock`、`pnpm-lock.yaml`、`bun.lockb` など。 74 | - もし存在すれば、vite.config.js の関連するフィールド。 75 | - パッチフォルダーの変更時間。 76 | - `NODE_ENV` の値。 77 | 78 | 上記のいずれかが変更された場合のみ、事前バンドルを再実行する必要があります。 79 | 80 | 何らかの理由で Vite に再バンドルを強制したい場合は、開発サーバーを `--force` コマンドラインオプションで起動するか、手動で `node_modules/.vite` のキャッシュディレクトリーを削除します。 81 | 82 | ### ブラウザーキャッシュ {#browser-cache} 83 | 84 | 解決された依存関係のリクエストは、開発中のページの再読み込みのパフォーマンスを向上させるために、HTTP ヘッダー `max-age = 31536000、immutable` で積極的にキャッシュされます。一度キャッシュされると、これらのリクエストは開発サーバーに再び到達することはありません。異なるバージョンがインストールされた（パッケージマネージャーのロックファイルに反映された）場合は、付与されているバージョンクエリーによって自動的に無効になります。ローカルでの編集で依存関係をデバッグしたい場合は、以下のように行えます: 85 | 86 | 1. ブラウザーの devtools のネットワークタブからキャッシュを一時的に無効にします。 87 | 2. Vite 開発サーバーを `--force` フラグで再起動して、依存関係を再バンドルします。 88 | 3. ページをリロードします。 89 | -------------------------------------------------------------------------------- /guide/philosophy.md: -------------------------------------------------------------------------------- 1 | # プロジェクト理念 2 | 3 | ## 無駄のない拡張可能なコア 4 | 5 | Vite は、すべてのユーザーのすべてのユースケースをカバーするつもりはありません。Vite は、Web アプリケーションを構築するための最も一般的なパターンをすぐにサポートすることを目指していますが、プロジェクトの長期的な保守性を維持するために、[Vite のコア](https://github.com/vitejs/vite)は小さな API サーフェスで無駄のない状態を維持しなければなりません。この目標は、[Vite の Rollup ベースのプラグインシステム](./api-plugin.md)のおかげで可能になりました。外部プラグインとして実装できる機能は、一般的に Vite コアには追加されません。[vite-plugin-pwa](https://vite-pwa-org.netlify.app/) は Vite コアで実現できることの素晴らしい例であり、あなたのニーズをカバーする[よく整備されたプラグイン](https://github.com/vitejs/awesome-vite#plugins)がたくさんあります。Vite は Rollup プロジェクトと密接に協力し、Plugin API に必要な拡張を可能な限り上流にプッシュすることで、plain-rollup と Vite の両方のプロジェクトでプラグインが可能な限り使用できるようにしています。 6 | 7 | ## モダン Web を推し進める 8 | 9 | Vite は、モダンなコードを書くことを後押しする opinionated な機能を提供します。例: 10 | 11 | - ソースコードは ESM でのみ書くことができます。ESM 以外の依存関係を動作させるには [ESM として事前にバンドル](./dep-pre-bundling) する必要があります。 12 | - Web ワーカーは最新の標準に従うため、[`new Worker` 構文](./features#web-workers) で書くことが推奨されます。 13 | - Node.js モジュールはブラウザーでは使用できません。 14 | 15 | 新しい機能を追加する際には、これらのパターンに従って将来性のある API を作成します。それは他のビルドツールと互換性があるとは限りません。 16 | 17 | ## パフォーマンスへの実用的なアプローチ 18 | 19 | Vite はその[始まり](./why.md)以来、パフォーマンスに重点を置いてきました。その開発サーバーアーキテクチャーは、プロジェクトの規模が大きくなっても高速なまま維持する HMR を可能にします。Vite は [esbuild](https://esbuild.github.io/) や [SWC](https://github.com/vitejs/vite-plugin-react-swc) のようなネイティブツールを使って集中的なタスクを実装しますが、スピードと柔軟性のバランスを取るために残りのコードは JS に保持します。必要に応じて、フレームワークのプラグインはユーザーコードをコンパイルするために [Babel](https://babeljs.io/) を利用します。そしてビルド時に Vite は現在 [Rollup](https://rollupjs.org/) を使用しています。バンドルサイズやプラグインの幅広いエコシステムにアクセスすることが単純なスピードよりも重要です。Vite は、API の安定性を保ちつつ、DX を向上させる新しいライブラリーが登場すればそれを使用し、内部的に進化し続けます。 20 | 21 | ## Vite 上にフレームワークを構築する 22 | 23 | Vite はユーザーが直接使用することもできますが、フレームワークを作成するためのツールとして輝いています。Vite のコアはフレームワークに依存しませんが、各 UI フレームワーク用に洗練されたプラグインが用意されています。その [JS API](./api-javascript.md) によって、アプリフレームワークの作者は Vite の機能を使ってユーザーに合わせた体験を作ることができます。Vite は [SSR プリミティブ](./ssr.md)のサポートを含んでいます。これは通常、より高いレベルのツールに存在しますが、モダンな Web フレームワークを構築するための基本です。また、Vite プラグインは、フレームワーク間で共有する方法を提供することで、全体像を完成させます。Vite はまた、[Ruby](https://vite-ruby.netlify.app/) や [Laravel](https://laravel.com/docs/10.x/vite) のような[バックエンドフレームワーク](./backend-integration.md)と組み合わせるときにも最適です。 24 | 25 | ## アクティブなエコシステム 26 | 27 | Vite の進化は、フレームワークやプラグインのメンテナ、ユーザー、そして Vite チームの協力によって成り立っています。プロジェクトが Vite を採用したら、Vite のコア開発に積極的に参加することを推奨しています。[vite-ecosystem-ci](https://github.com/vitejs/vite-ecosystem-ci) のようなツールに助けられながら、各リリースでのリグレッションを最小化するために、エコシステムの主要なプロジェクトと密接に協力しています。このツールにより、選択した PR に対して Vite を使用して主要プロジェクトの CI を実行することができ、エコシステムがリリースに対してどのように反応するかを明確に把握することができます。私たちは、ユーザーに影響を与える前にリグレッションを修正し、プロジェクトがリリースされたらすぐに次のバージョンにアップデートできるように努めています。もしあなたが Vite で仕事をしているのであれば、ぜひ [Vite の Discord](https://chat.vite.dev) に参加して、プロジェクトにも参加してください。 28 | -------------------------------------------------------------------------------- /guide/static-deploy-github-pages.yaml: -------------------------------------------------------------------------------- 1 | # Imported in static-deploy.md 2 | # This file is extracted as a separate file so that renovate can update the action versions 3 | # 4 | #region content 5 | # Simple workflow for deploying static content to GitHub Pages 6 | name: Deploy static content to Pages 7 | 8 | on: 9 | # Runs on pushes targeting the default branch 10 | push: 11 | branches: ['main'] 12 | 13 | # Allows you to run this workflow manually from the Actions tab 14 | workflow_dispatch: 15 | 16 | # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages 17 | permissions: 18 | contents: read 19 | pages: write 20 | id-token: write 21 | 22 | # Allow one concurrent deployment 23 | concurrency: 24 | group: 'pages' 25 | cancel-in-progress: true 26 | 27 | jobs: 28 | # Single deploy job since we're just deploying 29 | deploy: 30 | environment: 31 | name: github-pages 32 | url: ${{ steps.deployment.outputs.page_url }} 33 | runs-on: ubuntu-latest 34 | steps: 35 | - name: Checkout 36 | uses: actions/checkout@v4 37 | - name: Set up Node 38 | uses: actions/setup-node@v4 39 | with: 40 | node-version: lts/* 41 | cache: 'npm' 42 | - name: Install dependencies 43 | run: npm ci 44 | - name: Build 45 | run: npm run build 46 | - name: Setup Pages 47 | uses: actions/configure-pages@v5 48 | - name: Upload artifact 49 | uses: actions/upload-pages-artifact@v3 50 | with: 51 | # Upload dist folder 52 | path: './dist' 53 | - name: Deploy to GitHub Pages 54 | id: deployment 55 | uses: actions/deploy-pages@v4 56 | #endregion content 57 | -------------------------------------------------------------------------------- /guide/using-plugins.md: -------------------------------------------------------------------------------- 1 | # プラグインの使用 2 | 3 | Vite はプラグインを使っての拡張が可能で、Rollup の優れた設計のプラグインインターフェイスに基づいて、 Vite 固有のオプションがいくつか追加されています。つまり、 Vite ユーザーは Rollup プラグインの成熟したエコシステムを利用しながら、必要に応じて開発サーバーや SSR 機能を拡張することができます。 4 | 5 | ## プラグインの追加 6 | 7 | プラグインを使うには、プロジェクトの `devDependencies` に追加し、 `vite.config.js` 設定ファイルの `plugins` 配列に含める必要があります。例えば、レガシーブラウザーのサポートを提供するには、公式の [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) が使えます: 8 | 9 | ``` 10 | $ npm add -D @vitejs/plugin-legacy 11 | ``` 12 | 13 | ```js twoslash [vite.config.js] 14 | import legacy from '@vitejs/plugin-legacy' 15 | import { defineConfig } from 'vite' 16 | 17 | export default defineConfig({ 18 | plugins: [ 19 | legacy({ 20 | targets: ['defaults', 'not IE 11'], 21 | }), 22 | ], 23 | }) 24 | ``` 25 | 26 | また `plugins` は、複数のプラグインを含むプリセットを 1 つの要素として受け入れることもできます。これは、複数のプラグインを使って実装した複雑な機能（フレームワークの統合など）に便利です。配列は内部的にフラット化されます。 27 | 28 | 偽値（falsy な値）のプラグインは無視され、プラグインを簡単にアクティブ化や非アクティブ化するのに使えます。 29 | 30 | ## プラグインの検索 31 | 32 | :::tip NOTE 33 | Vite は、一般的な Web 開発パターンをすぐに使えるようにサポートすることを目的としています。Vite や互換性のある Rollup プラグインを探す前に、 [特徴ガイド](../guide/features.md) を確認してください。 Rollup プロジェクトでプラグインが必要になる多くのケースは、 Vite ですでにカバーされています。 34 | ::: 35 | 36 | 公式プラグインの情報は、 [プラグインのセクション](../plugins/) をご覧ください。コミュニティーのプラグインは [awesome-vite](https://github.com/vitejs/awesome-vite#plugins) に一覧があります。 37 | 38 | [推奨される規約](./api-plugin.md#規約) に従ったプラグインは次の方法でも見つけることができます。 Vite プラグインは [npm search for vite-plugin](https://www.npmjs.com/search?q=vite-plugin&ranking=popularity)、 Rollup プラグインは [npm search for rollup-plugin](https://www.npmjs.com/search?q=rollup-plugin&ranking=popularity) です。 39 | 40 | ## プラグインの順番を強制 41 | 42 | 一部の Rollup プラグインとの互換性のために、プラグインの順序を強制したり、ビルド時にだけ適用したりする必要があるかもしれません。これは Vite プラグインの実装の詳細でなければなりません。プラグインの位置を強制するには、 `enforce` 修飾子を使います: 43 | 44 | - `pre`: Vite コアプラグインの前にプラグインを起動する 45 | - デフォルト: Vite コアプラグインの後にプラグインを起動する 46 | - `post`: Vite ビルドプラグインの後にプラグインを起動する 47 | 48 | ```js twoslash [vite.config.js] 49 | import image from '@rollup/plugin-image' 50 | import { defineConfig } from 'vite' 51 | 52 | export default defineConfig({ 53 | plugins: [ 54 | { 55 | ...image(), 56 | enforce: 'pre', 57 | }, 58 | ], 59 | }) 60 | ``` 61 | 62 | 詳しくは [プラグイン API ガイド](./api-plugin.md#plugin-ordering) を参照してください。 63 | 64 | ## 条件付きの適用 65 | 66 | デフォルトでは、プラグインは配信とビルドの両方で起動されます。配信時やビルド時のみに条件付きでプラグインを適用する必要がある場合は、 `apply` プロパティを使って `'build'` か `'serve'` の時にだけプラグインを呼び出します: 67 | 68 | ```js twoslash [vite.config.js] 69 | import typescript2 from 'rollup-plugin-typescript2' 70 | import { defineConfig } from 'vite' 71 | 72 | export default defineConfig({ 73 | plugins: [ 74 | { 75 | ...typescript2(), 76 | apply: 'build', 77 | }, 78 | ], 79 | }) 80 | ``` 81 | 82 | ## プラグインのビルド 83 | 84 | プラグインの作成に関するドキュメントは、 [プラグイン API ガイド](./api-plugin.md) をご覧ください。 85 | -------------------------------------------------------------------------------- /guide/why.md: -------------------------------------------------------------------------------- 1 | # Vite を使う理由 2 | 3 | ## 問題点 4 | 5 | ES モジュールがブラウザーで利用できるようになるまで、開発者はモジュール化された JavaScript を生成するネイティブの仕組みを持っていませんでした。これは、私たちが「バンドル」のコンセプトに慣れ親しんでいる理由でもあります: すなわち、ブラウザーで実行可能なようにソースモジュールをクロール、処理し、連結するツールを使用しています。 6 | 7 | 時を経て [webpack](https://webpack.js.org/) や [Rollup](https://rollupjs.org)、[Parcel](https://parceljs.org/) のようなツールが登場し、フロントエンド開発者の開発体験は大きく向上されました。 8 | 9 | しかしながら、大規模なアプリケーションが作られるようになってくると、取り扱う JavaScript の量は劇的に増加しました。大規模プロジェクトでは、数千ものモジュールが含まれることも珍しくありません。JavaScript ベースのツールを使用していては、いずれパフォーマンスのボトルネックにぶつかります: 開発サーバーを起動するのにやたらと長く待つこともあります（数分かかることさえ！）。また、Hot Module Replacement（HMR）を利用していても、ファイル編集がブラウザーに反映されるまで数秒かかることもあります。フィードバックの遅さが継続することは、開発者の生産性や幸福度に大きな影響を与える可能性があります。 10 | 11 | Vite では新しいエコシステムの進歩を活用し、これらの問題を解決することに取り組んでいます: ブラウザーのネイティブ ES モジュールや、ネイティブにコンパイルされる言語で書かれた先進的な JavaScript ツールの利用です。 12 | 13 | ### 遅いサーバー起動 14 | 15 | 開発サーバーがコールドスタートするとき、バンドラーベースのビルドセットアップは、アプリケーション全体を提供する前に、アプリケーション全体を隅々までクロールしてビルドする必要があります。 16 | 17 | Vite はまず最初にアプリケーションのモジュールを 2 つのカテゴリーに分割することで、開発サーバーの起動時間を改善します: **依存関係**と**ソースコード**です。 18 | 19 | - **依存関係**の大部分は開発中あまり変更されないプレーンな JavaScript です。巨大な依存関係の中には、処理コストが極めて高いものがあります（例: 100 ものモジュールを持つコンポーネントライブラリー）。依存関係は、様々なモジュール形式で出力されることがあります（例: ESM または CommonJS）。 20 | 21 | Vite は、[esbuild](https://esbuild.github.io/) を使用して[依存関係の事前バンドル](./dep-pre-bundling.md)を行います。esbuild は Go 言語によって開発されており、依存関係の事前バンドルは、JavaScript ベースよりも 10 倍から 100 倍高速です。 22 | 23 | - **ソースコード**には変換を必要とするプレーンな JavaScript ではないものが含まれることがよくあり、頻繁に編集されます（例: JSX、CSS や Vue/Svelte コンポーネント）。また、全てのソースコードを同時に読み込む必要はありません（例: ルーティングによるコード分割）。 24 | 25 | Vite は、[ネイティブ ESM](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules) を行使してソースコードを提供します。ブラウザーは、実質的にバンドラーの仕事の一部を引き受けます: Vite はブラウザーのリクエストに応じて、ソースコードを変換し提供するのみになります。条件で囲われている動的インポートのコードは、現在の画面で使われる場合のみ処理されます。 26 | 27 | 31 | 32 | 33 | 34 | ### 遅い更新速度 35 | 36 | バンドラーベースのビルドセットアップでファイルが編集されたとき、全てのバンドルを再構築することが非効率なことは明白です: 更新スピードはアプリケーションのサイズに応じて線形的に低下してしまうからです。 37 | 38 | バンドラーの中には開発サーバーがメモリー上でバンドルを実行し、ファイルが変更されたときにモジュールグラフの一部のみ無効化して再処理を行うものも存在しますが、それでもバンドル全体を再構築して、ウェブページをリロードしなければなりません。バンドルの再構築にはコストがかかりますし、ページがリロードされるとアプリケーションの現在の状態は消えてしまいます。そのため、幾つかのバンドラーは HMR（ホットモジュールリプレースメント）をサポートしています: これにより、ページの変更に関係のない部分には影響を与えることなく、モジュールを「ホットリプレース」することができます。これは開発者体験を大きく改善します。- しかしながら、実際には HMR でもアプリケーションが大きくなるにつれ更新速度が著しく悪化することが分かってきました。 39 | 40 | Vite では、HMR をネイティブ ESM 上で行います。ファイルが編集されたとき、Vite は編集されたモジュールと最も近い HMR バウンダリ間のつながりを正確に無効化することで（大抵はモジュール本体だけです）、HMR による更新はアプリケーションのサイズに関係なく一貫して高速で実行されます。 41 | 42 | また、Vite は HTTP ヘッダーを活用して、フルページのリロードも高速化します（ここでも、ブラウザーにはもっと働いてもらいます）: ソースコードモジュールのリクエストでは `304 Not Modified` を利用して条件が作成されます。そして、依存モジュールのリクエストでは、一度キャッシュされたものが再びサーバーにヒットしないよう、`Cache-Control: max-age=31536000,immutable` を利用して積極的にキャッシュされます。 43 | 44 | 超高速な Vite を一度体験してしまうと、バンドルでの開発にまた耐えられるかはとても疑わしいです。 45 | 46 | ## プロダクションではバンドルする理由 47 | 48 | ネイティブ ESM が広くサポートされるようになっても、バンドルされていない ESM をプロダクション用にリリースすることは非効率です（HTTP/2 を利用していても）。これは、ネットワークのラウンドトリップの増加がネストされたインポートによって引き起こされるためです。プロダクションでは最適化されたローディングパフォーマンスを得るために、ツリーシェイキングや遅延読み込み、（キャッシュ改善のための）共通コード分割などの技術を用いつつバンドルを行うことは、より良いことです。 49 | 50 | 開発サーバーとプロダクションビルド間で、最適化された出力と一貫した動作を確保することは容易なことではありません。そのため、Vite にはあらかじめ調整された[ビルドコマンド](./build.md)が用意されており、これには従来の常識を破る多くの[パフォーマンス最適化](./features.md#build-optimizations)が施されています。 51 | 52 | ## なぜ esbuild でバンドルしないのか？ 53 | 54 | Vite は [開発環境で一部の依存関係を事前バンドルする](./dep-pre-bundling.md)ために esbuild を活用していますが、本番ビルドのためのバンドラーとしては esbuild を利用しません。 55 | 56 | Vite の現在のプラグイン API は、`esbuild` をバンドラーとして使用することと互換性がありません。`esbuild` の方が速いにもかかわらず、Vite は Rollup の柔軟なプラグイン API とインフラストラクチャーを採用し、エコシステムでの成功に大きく貢献しました。当面は、Rollup の方がパフォーマンスと柔軟性のトレードオフに優れていると考えています。 57 | 58 | Rollup はパフォーマンスの向上にも取り組んでおり、[v4 でパーサーを SWC に切り替えました](https://github.com/rollup/rollup/pull/5073)。 そして、Rolldown と呼ばれる Rollup の Rust ポートを構築する取り組みが進行中です。 Rolldown の準備が完了すると、Vite の Rollup と esbuild の両方が置き換えられ、ビルドのパフォーマンスが大幅に向上し、開発とビルドの間の不一致が解消されます。 [詳細については、Evan You の ViteConf 2023 基調講演](https://youtu.be/hrdwQHoAp0M) をご覧ください。 59 | 60 | ## Vite は他の非バンドルのビルドツールとどう違いますか？ {#how-vite-relates-to-other-unbundled-build-tools} 61 | 62 | Preact チームが開発した [WMR](https://github.com/preactjs/wmr) も似たような機能群を提供しようとしていました。Vite の開発用およびビルド用のユニバーサルな Rollup プラグインの API は、これに影響を受けました。 WMR はもうメンテナンスされていません。Preact チームは現在、[@preactjs/preset-vite](https://github.com/preactjs/preset-vite) とともに Vite を使用することを推奨しています。 63 | 64 | [Snowpack](https://www.snowpack.dev/) も no-bundle ネイティブな ESM の開発サーバーで、Vite と非常に近い目的を持っていました。Vite の依存関係の事前ビルドの機能は、Snowpack v1（現在の[`esinstall`](https://github.com/snowpackjs/snowpack/tree/main/esinstall)）にも影響を受けています。Snowpack は今ではメンテナンスされていません。現在、Snowpack チームは Vite を利用した静的サイトビルダーである [Astro](https://astro.build/) の開発に取り組んでいます。 65 | 66 | [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/)（旧称 `es-dev-server`）は素晴らしいプロジェクトです。Vite 1.0 の Koa ベースのサーバーのセットアップはこのプロジェクトに影響を受けたものです。`@web` アンブレラプロジェクトは活発にメンテナンスされており、Vite ユーザーにも役に立つ他の多くの優れたツールが含まれています。 67 | -------------------------------------------------------------------------------- /images/bundler.svg: -------------------------------------------------------------------------------- 1 | 2 | バンドルベースの開発サーバー 3 | 4 | 5 | entry 6 | 7 | ··· 8 | 9 | route 10 | 11 | route 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | module 23 | 24 | module 25 | 26 | module 27 | 28 | module 29 | 30 | ··· 31 | 32 | 33 | 34 | Bundle 35 | 36 | Server ready 37 | 38 | -------------------------------------------------------------------------------- /images/community/placeholder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/images/community/placeholder.jpg -------------------------------------------------------------------------------- /images/esm.svg: -------------------------------------------------------------------------------- 1 | 2 | ネイティブ ESM ベースの開発サーバー 3 | 4 | entry 5 | 6 | 7 | ··· 8 | 9 | 10 | route 11 | 12 | route 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | module 25 | 26 | module 27 | 28 | module 29 | 30 | module 31 | 32 | ··· 33 | 34 | Server ready 35 | 36 | 37 | 動的インポート （コード分割点） 38 | HTTP リクエスト 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /images/lit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/preact.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/svelte.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/v3-docs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/images/v3-docs.png -------------------------------------------------------------------------------- /images/v3-new-open-issues-and-PRs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/images/v3-new-open-issues-and-PRs.png -------------------------------------------------------------------------------- /images/v3-open-issues-and-PRs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/images/v3-open-issues-and-PRs.png -------------------------------------------------------------------------------- /images/vercel-configuration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/images/vercel-configuration.png -------------------------------------------------------------------------------- /images/vite-plugin-inspect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/images/vite-plugin-inspect.png -------------------------------------------------------------------------------- /images/vite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /images/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vite 3 | titleTemplate: 次世代フロントエンドツール 4 | pageClass: landing dark 5 | 6 | layout: home 7 | aside: false 8 | editLink: false 9 | markdownStyles: false 10 | --- 11 | 12 | 28 | 29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
48 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build.environment] 2 | NODE_VERSION = "18" 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "type": "module", 4 | "scripts": { 5 | "docs": "vitepress dev", 6 | "build-docs": "vitepress build", 7 | "serve-docs": "vitepress serve", 8 | "lint": "textlint --format pretty-error **/*.md" 9 | }, 10 | "devDependencies": { 11 | "@shikijs/vitepress-twoslash": "^2.5.0", 12 | "@type-challenges/utils": "^0.1.1", 13 | "@types/express": "^5.0.2", 14 | "@types/node": "^22.15.21", 15 | "feed": "^5.0.1", 16 | "gsap": "^3.13.0", 17 | "lint-staged": "^16.0.0", 18 | "textlint": "^13.4.1", 19 | "textlint-filter-rule-allowlist": "^4.0.0", 20 | "textlint-filter-rule-comments": "^1.2.2", 21 | "textlint-rule-preset-vuejs-jp": "git+https://github.com/vuejs-jp/textlint-rule-preset-vuejs-jp.git", 22 | "vite": "^6.3.5", 23 | "vitepress": "1.6.3", 24 | "vitepress-plugin-group-icons": "^1.5.5", 25 | "vitepress-plugin-llms": "^1.3.3", 26 | "vue": "^3.5.14", 27 | "yorkie": "^2.0.0" 28 | }, 29 | "gitHooks": { 30 | "pre-commit": "lint-staged" 31 | }, 32 | "lint-staged": { 33 | "*.md": "textlint --format pretty-error" 34 | }, 35 | "packageManager": "pnpm@10.11.0", 36 | "pnpm": { 37 | "onlyBuiltDependencies": [ 38 | "esbuild", 39 | "yorkie" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /plugins/index.md: -------------------------------------------------------------------------------- 1 | # プラグイン 2 | 3 | :::tip NOTE 4 | Vite は、一般的な Web 開発パターンをすぐに使えるようにサポートすることを目的としています。Vite や互換性のある Rollup プラグインを探す前に、 [特徴ガイド](../guide/features.md) を確認してください。 Rollup プロジェクトでプラグインが必要になる多くのケースは、 Vite ですでにカバーされています。 5 | ::: 6 | 7 | プラグインの使い方については[プラグインの使用](../guide/using-plugins)を参照ください。 8 | 9 | ## 公式プラグイン 10 | 11 | ### [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) 12 | 13 | - Vue 3 の単一ファイルコンポーネントのサポートを提供します。 14 | 15 | ### [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx) 16 | 17 | - Vue 3 の JSX（[専用の Babel transform](https://github.com/vuejs/jsx-next) を介して）のサポートを提供します。 18 | 19 | ### [@vitejs/plugin-vue2](https://github.com/vitejs/vite-plugin-vue2) 20 | 21 | - Vue 2.7 の単一ファイルコンポーネントのサポートを提供します。 22 | 23 | ### [@vitejs/plugin-vue2-jsx](https://github.com/vitejs/vite-plugin-vue2-jsx) 24 | 25 | - Vue 2.7 の JSX（[専用の Babel transform ](https://github.com/vuejs/jsx-vue2/)を介して）のサポートを提供します。 26 | 27 | ### [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react) 28 | 29 | - esbuild と Babel を使用し、小さなパッケージフットプリントで高速な HMR や、Babel 変換パイプラインを使用できる柔軟性を実現します。Babel プラグインを追加しない場合、ビルド時には esbuild のみが使用されます。 30 | 31 | ### [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) 32 | 33 | - 開発中は Babel を SWC に置き換えます。プロダクションビルド時には、プラグインを使用する場合は SWC+esbuild、それ以外は esbuild を使用します。非標準の React 拡張を必要としない大きなプロジェクトでは、コールドスタートやホットモジュールリプレースメント（HMR）が大幅に高速化されます。 34 | 35 | ### [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 36 | 37 | - 本番環境向けにレガシーブラウザーのサポートを提供します。 38 | 39 | ## コミュニティープラグイン 40 | 41 | [awesome-vite](https://github.com/vitejs/awesome-vite#plugins) を確認してみてください - あなたのプラグインを掲載するために PR を出すこともできます。 42 | 43 | ## Rollup プラグイン 44 | 45 | [Vite プラグイン](../guide/api-plugin) は、Rollup プラグインのインターフェイスを拡張したものです。 [Rollup プラグインとの互換性セクション](../guide/api-plugin#rollup-plugin-compatibility) に詳しい情報があります。 46 | -------------------------------------------------------------------------------- /public/_headers: -------------------------------------------------------------------------------- 1 | /assets/* 2 | cache-control: max-age=31536000 3 | cache-control: immutable 4 | 5 | /*.svg 6 | cache-control: max-age=604800 7 | cache-control: immutable 8 | 9 | /*.png 10 | cache-control: max-age=604800 11 | cache-control: immutable 12 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | # temporary, we'll flip this around some day 2 | https://ja.vitejs.dev/* https://ja.vite.dev/:splat 301! 3 | 4 | /guide/api-vite-runtime /guide/api-environment 301 5 | /guide/api-vite-runtime.html /guide/api-environment 301 6 | /guide/api-vite-environment /guide/api-environment 301 7 | /guide/api-vite-environment.html /guide/api-environment 301 8 | /guide/comparisons /guide/why#how-vite-relates-to-other-unbundled-build-tools 301 9 | /guide/comparisons.html /guide/why#how-vite-relates-to-other-unbundled-build-tools 301 10 | 11 | # short links 12 | /rolldown /guide/rolldown 301 13 | -------------------------------------------------------------------------------- /public/astro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/bolt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/cypress.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /public/ecosystem-vite4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/ecosystem-vite4.png -------------------------------------------------------------------------------- /public/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/logo-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /public/logo-with-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/logo-with-shadow.png -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /public/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/noise.png -------------------------------------------------------------------------------- /public/nuxtlabs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/og-image-announcing-vite3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/og-image-announcing-vite3.png -------------------------------------------------------------------------------- /public/og-image-announcing-vite4-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/og-image-announcing-vite4-3.png -------------------------------------------------------------------------------- /public/og-image-announcing-vite4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/og-image-announcing-vite4.png -------------------------------------------------------------------------------- /public/og-image-announcing-vite5-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/og-image-announcing-vite5-1.png -------------------------------------------------------------------------------- /public/og-image-announcing-vite5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/og-image-announcing-vite5.png -------------------------------------------------------------------------------- /public/og-image-announcing-vite6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/og-image-announcing-vite6.png -------------------------------------------------------------------------------- /public/og-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/og-image.jpg -------------------------------------------------------------------------------- /public/stackblitz.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vite.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/vite.mp3 -------------------------------------------------------------------------------- /public/vite4-3-hmr-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/vite4-3-hmr-time.png -------------------------------------------------------------------------------- /public/vite4-3-startup-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/vite4-3-startup-time.png -------------------------------------------------------------------------------- /public/vite5-1-10K-modules-loading-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/vite5-1-10K-modules-loading-time.png -------------------------------------------------------------------------------- /public/vite6-npm-weekly-downloads.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitejs/docs-ja/c68d9885f51c4a4d89920e7efdf275bc5fdade05/public/vite6-npm-weekly-downloads.png -------------------------------------------------------------------------------- /public/voice.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /releases.md: -------------------------------------------------------------------------------- 1 | # リリース 2 | 3 | Vite のリリースは[セマンティック バージョニング](https://semver.org/)に準拠します。Vite の [npm パッケージページ](https://www.npmjs.com/package/vite)で Vite の最新安定バージョンを確認できます。 4 | 5 | 過去のリリースの完全な変更履歴は [GitHub にて利用できます](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)。 6 | 7 | ## リリースサイクル 8 | 9 | Vite には、一定のリリースサイクルがありません。 10 | 11 | - **パッチ**リリースは必要に応じてリリースされます（通常は1週間ごと）。 12 | - **マイナー**リリースは常に新しい機能が含まれており、必要に応じてリリースされます。マイナーリリースには常にベータプレリリース段階があります（通常は2ヶ月ごと）。 13 | - **メジャー**リリースは通常 [Node.js の EOL スケジュール](https://endoflife.date/nodejs)に従い、予めアナウンスされます。これらのリリースはエコシステムとの長期的な議論を経て、アルファプレリリース段階とベータプレリリース段階があります（通常は1年ごと）。 14 | 15 | Vite チームがサポートする Vite のバージョン範囲は、以下の通りに自動的に決定されます: 16 | 17 | - **現在のマイナー**は、定期的に修正を受け取ります。 18 | - **1つ前のメジャー**（最新のマイナー向けのみ）および**1つ前のマイナー**は、重要な修正とセキュリティパッチを受け取ります。 19 | - **最後から2番目のメジャー**（その最新のマイナー向けのみ）および**最後から2番目のマイナー**は、セキュリティパッチを受け取ります。 20 | - これらより前のバージョンはすべてサポートされなくなります。 21 | 22 | 例として、Vite の最新バージョンが 5.3.10 の場合: 23 | 24 | - 定期パッチは `vite@5.3` に対してリリースされます。 25 | - 重要な修正とセキュリティパッチは、`vite@4` と `vite@5.2` にバックポートされます。 26 | - セキュリティパッチは、`vite@3` と `vite@5.1` にもバックポートされます。 27 | - `vite@2` および `vite@5.0` はサポートされなくなります。アップデートを受け取るには、ユーザーはアップグレードする必要があります。 28 | 29 | Vite を定期的にアップデートすることをお勧めします。各メジャーバージョンをアップデートする際には、[移行ガイド](/guide/migration)をご確認ください。Vite チームは、新しいバージョンの品質を確保するために、エコシステムの主要なプロジェクトと緊密に連携しています。Vite チームは、新しい Vite のバージョンをリリースする前に [vite-ecosystem-ci プロジェクト](https://github.com/vitejs/vite-ecosystem-ci)を用いてテストしています。Vite を利用しているほとんどのプロジェクトは、新しいバージョンのリリース後すぐにサポートを提供したり、新しいバージョンに移行したりできるはずです。 30 | 31 | ## セマンティックバージョニングエッジケース 32 | 33 | ### TypeScript 定義 34 | 35 | マイナーバージョンの間で TypeScript 定義に互換性のない変更を出す可能性があります。この理由は: 36 | 37 | - TypeScript 自体がマイナーバージョンの間に互換性のない変更を出すことがあり、TypeScript の新しいバージョンをサポートするために型を調整せざるを得ない可能性があります。 38 | - まれに TypeScript の新しいバージョンでのみ利用可能な機能を採用する必要が出てくる可能性があり、必要な TypeScript の最小バージョンが引き上げられます。 39 | - TypeScript を使用している場合、現在のマイナーを固定させる semver 範囲を使うことができ、 Vite の新しいマイナーバージョンが公開されるときに手動でアップグレードすることができます。 40 | 41 | ### esbuild 42 | 43 | [esbuild](https://esbuild.github.io/) は 1.0.0 に達しておらず、新しい機能やパフォーマンス改善を取り込むために、時に破壊的変更を含むことがあります。マイナーバージョンで esbuild のバージョンを上げることがあります。 44 | 45 | ### LTS でない Node.js のバージョン 46 | 47 | LTS でない Node.js のバージョン（奇数のもの）は Vite の CI でテストされていませんが、それらの [EOL](https://endoflife.date/nodejs) 以前では動くはずです。 48 | 49 | ## プレリリース 50 | 51 | マイナーリリースは通常決められていない数のベータ版を通過します。メジャーリリースはアルファ段階とベータ段階を通過します。 52 | 53 | プレリリースはアーリーアダプターやエコシステムからのメンテナーに統合 / 安定性テストの機会を提供し、フィードバックを受けるために存在します。本番でプレリリースを使用しないでください。すべてのプレリリースは不安定であると取り扱われ、途中で破壊的変更を出す可能性があります。プレリリースを使用するときは常に厳密なバージョンに固定してください。 54 | 55 | ## 非推奨 56 | 57 | マイナーリリースでより良い代替品に取って代わられた機能を定期的に非推奨にしています。非推奨となった機能は引き続き動作しますが、型やログによる警告が出力されます。これらは非推奨となった後、次のメジャーリリースで削除されます。各メジャーバージョンの[移行ガイド](/guide/migration)にはこれらの削除される機能のリストや代替手段の説明が含まれます。 58 | 59 | ## 実験的機能 60 | 61 | Vite の安定したバージョンでリリースされる一部の機能は実験的機能と指定されます。実験的機能では実体験を収集し最終的な設計に活用されます。この目的はユーザーに本番でテストしてもらうことでユーザーからのフィードバックを集めることです。実験的機能自体は不安定であると取り扱われ、制御下でのみ使用されるべきです。これらの機能はマイナーの間で変更されることがあるため、ユーザーはこれらの機能を利用する際には Vite のバージョンを固定する必要があります。私たちは各実験的機能ごとに [GitHub Discussion](https://github.com/vitejs/vite/discussions/categories/feedback?discussions_q=is%3Aopen+label%3Aexperimental+category%3AFeedback) を作成します。 62 | -------------------------------------------------------------------------------- /team.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: チーム紹介 4 | description: Viteの開発は、国際的なチームによって進められています。 5 | --- 6 | 7 | 16 | 17 | 18 | 19 | 20 | 24 | 25 | 26 | 27 | 28 | 32 | 35 | 36 | 37 | --------------------------------------------------------------------------------