const server =
await
- createServer({
+ createServer({ // user config options
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue b/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue
index fae71b094..ef677e292 100644
--- a/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue
+++ b/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue
@@ -23,8 +23,10 @@ import logoReact from './images/react.svg'
import logoRemix from './images/remix.svg'
import logoSvelte from './images/svelte.svg'
import logoLaravel from './images/laravel.svg'
+import logoAdonis from './images/adonis.svg'
import logoEmber from './images/ember.svg'
import logoPreact from './images/preact.svg'
+import logoHono from './images/hono.svg'
/**
* The frameworks and tools to display in this section.
@@ -149,6 +151,13 @@ const frameworks: Framework[] = [
url: 'https://laravel.com/',
visible: ref(false),
},
+ {
+ name: 'AdonisJS',
+ logo: logoAdonis,
+ color: '#5a45ff',
+ url: 'https://adonisjs.com/',
+ visible: ref(false),
+ },
{
name: 'EmberJS',
logo: logoEmber,
@@ -156,6 +165,13 @@ const frameworks: Framework[] = [
url: 'https://emberjs.com/',
visible: ref(false),
},
+ {
+ name: 'Hono',
+ logo: logoHono,
+ color: '#ff5c13',
+ url: 'https://hono.dev/',
+ visible: ref(false),
+ },
]
// Starting parameters
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/adonis.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/adonis.svg
new file mode 100644
index 000000000..0808286a2
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/adonis.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/images/hono.svg b/.vitepress/theme/components/landing/3. frameworks-section/images/hono.svg
new file mode 100644
index 000000000..9c7a84b5c
--- /dev/null
+++ b/.vitepress/theme/components/landing/3. frameworks-section/images/hono.svg
@@ -0,0 +1,4 @@
+
diff --git a/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue b/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue
index a0ec89c83..1f15db8ed 100644
--- a/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue
+++ b/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue
@@ -70,7 +70,7 @@ SolidJS in mind, they should scale from our simplest template to opinionated sta
name: 'Christoph Nakazawa',
handle: '@cpojer',
avatar:
- 'https://pbs.twimg.com/profile_images/1189537722286952449/OrscO0bD_400x400.jpg',
+ 'https://pbs.twimg.com/profile_images/1854151427595407360/4GyUCgEH_400x400.jpg',
comment: ['Vite is gonna eat the (JavaScript) world.'],
},
{
diff --git a/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue b/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue
index 79d81fb57..cfda52038 100644
--- a/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue
+++ b/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue
@@ -1,5 +1,5 @@
- ```
\ No newline at end of file
+ ```
+
+ ::: details `importedChunks` 의사 구현체
+ 아래 예시 코드는 `importedChunks` 의사 구현체입니다. TypeScript로 작성되어 있으며,
+ 실제 적용 시에는 사용하는 프로그래밍 언어와 템플릿 언어에 맞게 수정이 필요합니다:
+
+ ```ts
+ import type { Manifest, ManifestChunk } from 'vite'
+
+ export default function importedChunks(
+ manifest: Manifest,
+ name: string,
+ ): ManifestChunk[] {
+ const seen = new Set()
+
+ function getImportedChunks(chunk: ManifestChunk): ManifestChunk[] {
+ const chunks: ManifestChunk[] = []
+ for (const file of chunk.imports ?? []) {
+ const importee = manifest[file]
+ if (seen.has(file)) {
+ continue
+ }
+ seen.add(file)
+
+ chunks.push(...getImportedChunks(importee))
+ chunks.push(importee)
+ }
+
+ return chunks
+ }
+
+ return getImportedChunks(manifest[name])
+ }
+ ```
+
+ :::
\ No newline at end of file
diff --git a/guide/build.md b/guide/build.md
index b34936a07..82370618b 100644
--- a/guide/build.md
+++ b/guide/build.md
@@ -1,10 +1,10 @@
# 프로덕션 빌드 {#building-for-production}
-앱을 어느정도 완성하셨나요? 프로덕션으로 빌드하고자 한다면 `vite build` 명령을 실행해주세요. 빌드 시 기본적으로 `/index.html` 파일이 빌드를 위한 진입점(Entry point)으로 사용되며, 정적 호스팅을 위한 형태로 진행됩니다. 추가적으로, GitHub Pages와 같은 정적 호스팅 서비스를 위한 빌드 방법을 알고싶다면 [정적 웹 페이지로 배포하기](./static-deploy) 섹션을 참고해주세요.
+앱을 어느정도 완성하셨나요? 프로덕션으로 빌드하고자 한다면 `vite build` 명령을 실행해주세요. 빌드 시 기본적으로 `/index.html` 파일이 빌드를 위한 진입점으로 사용되며, 정적 호스팅을 위한 형태로 진행됩니다. 추가적으로, GitHub Pages와 같은 정적 호스팅 서비스를 위한 빌드 방법을 알고싶다면 [정적 웹 페이지로 배포하기](./static-deploy) 섹션을 참고해주세요.
## 브라우저 지원 현황 {#browser-compatibility}
-빌드된 프로덕션 번들은 모던 JavaScript를 지원하는 환경에서 동작한다고 가정합니다. 따라서 Vite는 기본적으로 [네이티브 ES 모듈](https://caniuse.com/es6-module), [네이티브 ESM의 동적 Import](https://caniuse.com/es6-module-dynamic-import), 그리고 [`import.meta`](https://caniuse.com/mdn-javascript_statements_import_meta)를 지원하는 브라우저를 타깃으로 하고 있습니다:
+빌드된 프로덕션 번들은 모던 JavaScript를 지원하는 환경에서 동작한다고 가정합니다. 따라서 Vite는 기본적으로 [네이티브 ES 모듈](https://caniuse.com/es6-module), [네이티브 ESM 동적 임포트](https://caniuse.com/es6-module-dynamic-import), 그리고 [`import.meta`](https://caniuse.com/mdn-javascript_statements_import_meta)를 지원하는 브라우저를 타깃으로 하고 있습니다:
- Chrome >=87
- Firefox >=78
@@ -13,7 +13,7 @@
만약 JavaScript 타깃을 지정하고자 한다면, [`build.target` 설정](/config/build-options.md#build-target)을 이용해주세요. 다만 버전은 최소한 `es2015` 이상이어야 합니다.
-알아두어야 할 사항은, Vite는 오로지 구분 변환만 진행할 뿐 **기본적으로 폴리필을 다루지 않는다는 점** 입니다. 만약 폴리필이 필요하다면, 브라우저 User Agent를 기반으로 폴리필 번들을 생성해 주는 https://cdnjs.cloudflare.com/polyfill/ 을 이용해 주세요.
+알아두어야 할 사항은, Vite는 오로지 구문 변환만 진행할 뿐 **기본적으로 폴리필을 다루지 않는다는 점** 입니다. 만약 폴리필이 필요하다면, 브라우저 User Agent를 기반으로 폴리필 번들을 생성해 주는 https://cdnjs.cloudflare.com/polyfill/ 을 이용해 주세요.
레거시 브라우저의 경우 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 플러그인을 이용할 수 있습니다. 이 플러그인을 사용하면 자동으로 레거시 버전에 대한 청크를 생성하게 되고, 이를 통해 레거시 브라우저 또한 Vite으로 빌드된 앱을 이용할 수 있게 됩니다. 참고로, 생성된 레거시 청크는 브라우저가 ESM을 지원하지 않는 경우에만 불러오게 됩니다.
@@ -29,11 +29,21 @@ JS(`import`), CSS(`url()`), 그리고 `.html` 파일에서 참조되는 에셋
더욱 상세한 설정이 필요하다면 [Base 옵션 상세 설정](#advanced-base-options) 섹션을 참고해주세요.
+### 상대 경로 Base {#relative-base}
+
+만약 Base 경로를 미리 알 수 없는 경우라면, `"base": "./"` 또는 `"base": ""` 설정을 통해 상대 경로를 사용할 수 있습니다. 이렇게 하면 모든 에셋의 URL이 상대 경로로 생성됩니다.
+
+:::warning 상대 경로 Base 사용 시 레거시 브라우저 지원
+
+상대 경로 Base를 사용하기 위해서는 `import.meta`를 지원하는 브라우저가 필요합니다. [`import.meta`를 지원하지 않는 브라우저](https://caniuse.com/mdn-javascript_operators_import_meta)를 지원해야 한다면, [`legacy` 플러그인](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy)을 사용해 주세요.
+
+:::
+
## 빌드 커스터마이즈하기 {#customizing-the-build}
빌드와 관련된 커스터마이즈는 [build 설정](/config/build-options.md)을 통해 가능합니다. 특별히 알아두어야 할 것이 하나 있는데, [Rollup 옵션](https://rollupjs.org/configuration-options/)을 `build.rollupOptions`에 명시해 사용이 가능합니다.
-```ts
+```ts [vite.config.js]
export default defineConfig({
build: {
rollupOptions: {
@@ -65,8 +75,7 @@ window.addEventListener('vite:preloadError', (event) => {
`vite build --watch` 명령을 통해 Rollup Watcher를 활성화 할 수 있습니다. 또는, `build.watch` 옵션에서 [`WatcherOptions`](https://rollupjs.org/configuration-options/#watch)를 직접 명시할 수도 있습니다.
-```ts
-// vite.config.js
+```ts [vite.config.js]
export default defineConfig({
build: {
watch: {
@@ -96,8 +105,7 @@ export default defineConfig({
빌드 시에는, 사용자가 접근할 수 있는 모든 `.html` 파일에 대해 아래와 같이 빌드 진입점이라 명시해줘야만 합니다.
-```js twoslash
-// vite.config.js
+```js twoslash [vite.config.js]
import { resolve } from 'path'
import { defineConfig } from 'vite'
@@ -123,15 +131,15 @@ HTML 파일의 경우, Vite는 `rollupOptions.input` 객체에 명시된 엔트
라이브러리 배포 시점에서, [`build.lib` 설정 옵션](/config/build-options.md#build-lib)을 이용해보세요. 또한 라이브러리에 포함하지 않을 디펜던시를 명시할 수도 있습니다. `vue`나 `react` 같이 말이죠.
-```js twoslash
-// vite.config.js
+::: code-group
+
+```js twoslash [vite.config.js (single entry)]
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
lib: {
- // 여러 진입점은 객체 또는 배열로 지정할 수 있습니다.
entry: resolve(__dirname, 'lib/main.js'),
name: 'MyLib',
// 적절한 확장자가 추가됩니다.
@@ -153,16 +161,51 @@ export default defineConfig({
})
```
+```js twoslash [vite.config.js (multiple entries)]
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+ build: {
+ lib: {
+ entry: {
+ 'my-lib': resolve(__dirname, 'lib/main.js'),
+ secondary: resolve(__dirname, 'lib/secondary.js'),
+ },
+ name: 'MyLib',
+ },
+ rollupOptions: {
+ // 라이브러리에 포함하지 않을
+ // 디펜던시를 명시해주세요
+ external: ['vue'],
+ output: {
+ // 라이브러리 외부에 존재하는 디펜던시를 위해
+ // UMD 번들링 시 사용될 전역 변수를 명시할 수도 있습니다.
+ globals: {
+ vue: 'Vue',
+ },
+ },
+ },
+ },
+})
+```
+
+:::
+
패키지의 진입점이 되는 파일에는 패키지의 사용자가 `import` 할 수 있도록 `export` 구문이 포함되게 됩니다:
-```js
-// lib/main.js
+```js [lib/main.js]
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export { Foo, Bar }
```
-위와 같은 Rollup 설정과 함께 `vite build` 명령을 실행하게 되면, `es` 및 `umd` 두 가지의 포맷으로 번들링 과정이 진행되게 됩니다(이에 대해 조금 더 자세히 알고 싶다면 `build.lib` 설정을 참고해주세요).
+이러한 설정으로 `vite build` 명령을 실행하면 라이브러리 배포를 위한 Rollup 프리셋이 사용되며, 두 가지 번들 포맷을 생성합니다:
+
+- `es` 및 `umd` (진입점이 하나인 경우)
+- `es` 및 `cjs` (진입점이 다수인 경우)
+
+참고로 이 포맷은 [`build.lib.formats`](/config/build-options.md#build-lib) 옵션으로 설정할 수 있습니다.
```
$ vite build
@@ -173,7 +216,9 @@ dist/my-lib.umd.cjs 0.30 kB / gzip: 0.16 kB
`package.json`에는 아래와 같이 사용할 라이브러리를 명시해주세요.
-```json
+::: code-group
+
+```json [package.json (single entry)]
{
"name": "my-lib",
"type": "module",
@@ -189,9 +234,7 @@ dist/my-lib.umd.cjs 0.30 kB / gzip: 0.16 kB
}
```
-여러 진입점을 노출하는 경우는 아래와 같습니다:
-
-```json
+```json [package.json (multiple entries)]
{
"name": "my-lib",
"type": "module",
@@ -211,6 +254,31 @@ dist/my-lib.umd.cjs 0.30 kB / gzip: 0.16 kB
}
```
+:::
+
+### CSS 지원 {#css-support}
+
+만약 라이브러리에서 CSS를 임포트하는 경우, 빌드된 JS 파일과 함께 단일 CSS 파일로 번들링됩니다. 예를 들어 `dist/my-lib.css`와 같이 말이죠. 파일 이름은 기본적으로 `build.lib.fileName`을 따르지만, [`build.lib.cssFileName`](/config/build-options.md#build-lib)을 통해 변경할 수도 있습니다.
+
+사용자가 CSS 파일을 임포트할 수 있도록 `package.json`에 CSS 파일을 익스포트할 수도 있습니다:
+
+```json {12}
+{
+ "name": "my-lib",
+ "type": "module",
+ "files": ["dist"],
+ "main": "./dist/my-lib.umd.cjs",
+ "module": "./dist/my-lib.js",
+ "exports": {
+ ".": {
+ "import": "./dist/my-lib.js",
+ "require": "./dist/my-lib.umd.cjs"
+ },
+ "./style.css": "./dist/my-lib.css"
+ }
+}
+```
+
::: tip 파일 확장자
`package.json`에 `"type": "module"`이 명시되어 있지 않으면 Vite는 Node.js 호환성을 위해 다른 파일 확장자를 생성합니다. 즉, `.js`는 `.mjs`가 되고, `.cjs`는 `.js`가 됩니다.
:::
@@ -232,7 +300,7 @@ dist/my-lib.umd.cjs 0.30 kB / gzip: 0.16 kB
이미 배포된 에셋과 Public 디렉터리에 위치한 파일이 서로 다른 경로에 있을 수 있습니다. 이 경우 각각에 대해 다른 캐시 전략을 사용하고자 할 수 있는데, 이 때 Base 옵션에 대한 상세 설정이 필요합니다.
사용자는 세 가지 다른 경로로 배포하도록 선택할 수 있습니다:
-- 생성된 HTML 진입점(Entry) 파일 (SSR을 사용하는 동안 처리될 수 있음)
+- 생성된 HTML 진입점 파일 (SSR을 사용하는 동안 처리될 수 있음)
- 해시화 되어 생성된 에셋 (JS, CSS, 및 이미지와 같은 여러 파일들)
- 복사된 [Public 디렉터리 파일](assets.md#the-public-directory)
@@ -269,7 +337,9 @@ experimental: {
if (type === 'public') {
return 'https://www.domain.com/' + filename
} else if (path.extname(hostId) === '.js') {
- return { runtime: `window.__assetsPath(${JSON.stringify(filename)})` }
+ return {
+ runtime: `window.__assetsPath(${JSON.stringify(filename)})`
+ }
} else {
return 'https://cdn.domain.com/assets/' + filename
}
diff --git a/guide/cli.md b/guide/cli.md
index d482b082b..98fee7bc2 100644
--- a/guide/cli.md
+++ b/guide/cli.md
@@ -69,8 +69,9 @@ vite build [root]
| `-f, --filter ` | 디버그 로그 필터 (`string`)|
| `-m, --mode ` | env 모드 설정 (`string`)|
| `-h, --help` | 사용 가능한 CLI 옵션 표시|
+| `--app` | 모든 환경을 빌드, `builder: {}`와 동일 (`boolean`, 실험적 기능)|
-## Others {#others}
+## 기타 {#others}
### `vite optimize` {#vite-optimize}
diff --git a/guide/dep-pre-bundling.md b/guide/dep-pre-bundling.md
index f2031f42d..4ad54b800 100644
--- a/guide/dep-pre-bundling.md
+++ b/guide/dep-pre-bundling.md
@@ -37,7 +37,7 @@
이를 위해서는 연결된 디펜던시가 ESM 형태로 내보내져야 합니다. 만약 그렇지 않다면, 해당되는 디펜던시들을 [`optimizeDeps.include`](/config/dep-optimization-options.md#optimizedeps-include)와 [`build.commonjsOptions.include`](/config/build-options.md#build-commonjsoptions) 설정에 추가해주세요.
-```js twoslash
+```js twoslash [vite.config.js]
import { defineConfig } from 'vite'
// ---cut---
export default defineConfig({
diff --git a/guide/env-and-mode.md b/guide/env-and-mode.md
index 64d3072bc..4d76ede32 100644
--- a/guide/env-and-mode.md
+++ b/guide/env-and-mode.md
@@ -27,9 +27,11 @@ Vite는 [dotenv](https://github.com/motdotla/dotenv)를 이용해 [환경 변수
:::tip 환경 변수 우선순위
-`.env.production`과 같이 특정 모드에 대한 환경 변수는 일반적인 환경 변수(`.env`)보다 높은 우선순위를 갖습니다.
+`.env.production`과 같이 특정 모드에 대한 환경 변수는 일반적인 환경 변수(예: `.env`)보다 높은 우선순위를 갖습니다.
-또한 Vite가 실행될 때 이미 존재하던 환경 변수는 가장 높은 우선 순위를 가지며, `.env` 파일로 인해 덮어씌워지지 않습니다. 가령 `VITE_SOME_KEY=123 vite build` 와 같이 말이죠.
+Vite는 모드별 `.env.[mode]` 파일 외에도 항상 `.env`와 `.env.local` 파일을 로드합니다. 모드별 파일에 선언된 변수는 일반 파일에 있는 변수보다 우선하지만, `.env`나 `.env.local`에만 정의된 변수도 여전히 환경 변수로 사용할 수 있습니다.
+
+Vite가 실행될 때 이미 존재하던 환경 변수는 가장 높은 우선 순위를 가지며, `.env` 파일로 인해 덮어씌워지지 않습니다. 가령 `VITE_SOME_KEY=123 vite build` 와 같이 말이죠.
`.env` 파일은 Vite가 시작될 때 가져와집니다. 따라서 파일을 변경했다면 서버를 재시작해주세요.
:::
@@ -38,7 +40,7 @@ Vite는 [dotenv](https://github.com/motdotla/dotenv)를 이용해 [환경 변수
참고로, Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 `VITE_` 라는 접두사를 붙여 나타냅니다. 가령, 아래와 같이 환경 변수를 정의했다면:
-```
+```[.env]
VITE_SOME_KEY=123
DB_PASSWORD=foobar
```
@@ -55,11 +57,11 @@ console.log(import.meta.env.DB_PASSWORD) // undefined
위와 같이, `VITE_SOME_KEY`는 숫자이지만 파싱 시 문자열로 반환됩니다. 불리얼 환경 변수에 대해서도 동일하게 적용되며, 코드에서 사용할 때는 원하는 타입으로 변환해야 합니다.
:::
-또한 Vite는 [dotenv-expand](https://github.com/motdotla/dotenv-expand)를 사용해 기본적으로 환경 변수를 확장합니다. 문법에 대해 더 알아보고 싶다면 [이 문서](https://github.com/motdotla/dotenv-expand#what-rules-does-the-expansion-engine-follow)를 참고하세요.
+또한 Vite는 [dotenv-expand](https://github.com/motdotla/dotenv-expand)를 사용해 env 파일에 작성된 환경 변수를 확장합니다. 문법에 대해 더 알아보고 싶다면 [이 문서](https://github.com/motdotla/dotenv-expand#what-rules-does-the-expansion-engine-follow)를 참고하세요.
-참고로 만약 환경 변수의 값에 `$`를 사용하고 싶다면 `\`를 사용해야 합니다.
+만약 환경 변수의 값에 `$`를 사용하고 싶다면 `\`를 사용해야 합니다.
-```
+```[.env]
KEY=123
NEW_KEY1=test$foo # test
NEW_KEY2=test\$foo # test$foo
@@ -77,11 +79,11 @@ NEW_KEY3=test$KEY # test123
### TypeScript를 위한 인텔리센스 {#intellisense-for-typescript}
-기본적으로, Vite는 [`vite/client.d.ts`](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts)의 `import.meta.env`에 대한 타입 정의를 제공하고 있습니다. 물론 `.env.[mode]` 파일에서 더 많은 사용자 정의 환경 변수를 정의할 수 있으며, `VITE_` 접두사가 붙은 사용자 정의 환경 변수에 대해서는 TypeScript 인텔리센스 정의가 가능합니다.
+기본적으로, Vite는 [`vite/client.d.ts`](https://github.com/vitejs/vite/blob/main/packages/vite/client.d.ts)의 `import.meta.env`에 대한 타입 정의를 제공하고 있습니다. 물론 `.env.[mode]` 파일에서 더 많은 커스텀 환경 변수를 정의할 수 있으며, `VITE_` 접두사가 붙은 커스텀 환경 변수에 대해서는 TypeScript 인텔리센스 정의가 가능합니다.
`src` 디렉터리 내 `vite-env.d.ts` 파일을 생성한 후, 아래와 같이 `ImportMetaEnv`를 정의하여 `VITE_` 환경 변수에 대한 타입을 정의할 수 있습니다.
-```typescript
+```typescript [vite-env.d.ts]
///
interface ImportMetaEnv {
@@ -96,7 +98,7 @@ interface ImportMeta {
만약 코드가 [DOM](https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts)이나 [WebWorker](https://github.com/microsoft/TypeScript/blob/main/src/lib/webworker.generated.d.ts)와 같이 브라우저 환경의 타입이 필요하다면, `tsconfig.json`에서 [lib](https://www.typescriptlang.org/tsconfig#lib) 필드에 이를 명시해줄 수 있습니다.
-```json
+```json [tsconfig.json]
{
"lib": ["WebWorker"]
}
@@ -182,5 +184,5 @@ NODE_ENV=development
`NODE_ENV=...`는 명령뿐 아니라, `.env` 파일에서도 설정할 수 있습니다. 따라서 만약 `.env.[mode]` 파일에서 `NODE_ENV`가 설정되어 있다면, 모드를 통해서도 이를 제어할 수 있습니다. 그러나 `NODE_ENV`와 모드는 여전히 두 개의 다른 개념이라는 것을 유의하세요.
-명령에서 `NODE_ENV=...`를 사용하는 주된 이점은, Vite가 그 값을 조기에 감지할 수 있다는 것입니다. Vite는 설정 파일이 평가되기 전에는 `.env` 파일을 로드할 수 없기 때문에, 이 대신 명령을 이용하면 Vite 설정 파일에서 `process.env.NODE_ENV`에 접근할 수 있습니다.
+명령에서 `NODE_ENV=...`를 사용하는 주된 이점은, Vite가 그 값을 조기에 감지할 수 있다는 것입니다. Vite는 설정 파일이 분석되기 전에는 `.env` 파일을 로드할 수 없기 때문에, 이 대신 명령을 이용하면 Vite 설정 파일에서 `process.env.NODE_ENV`에 접근할 수 있습니다.
:::
\ No newline at end of file
diff --git a/guide/features.md b/guide/features.md
index 458cb51d3..30b73fc92 100644
--- a/guide/features.md
+++ b/guide/features.md
@@ -2,7 +2,7 @@
기본적으로 vite는 여타 정적 파일 서버와 크게 다르지 않습니다. 다만, vite는 네이티브 ESM 말고도 기존 번들러에서 제공하던 기능을 대부분 지원한다는 차이점이 있습니다.
-## NPM을 이용한 디펜던시 `import` 그리고 사전 번들링 {#npm-dependency-resolving-and-pre-building}
+## npm을 이용한 디펜던시 임포트 그리고 사전 번들링 {#npm-dependency-resolving-and-pre-building}
다음 코드는 네이티브 ES에서 정상적으로 실행되지 않습니다:
@@ -28,7 +28,7 @@ vite는 기본적으로 ESM를 통해 [HMR API](./api-hmr)를 제공합니다. H
## TypeScript {#typescript}
-vite는 `.ts` 파일에 대한 컴파일링 및 Import 역시 지원합니다.
+vite는 `.ts` 파일에 대한 컴파일링 및 임포트 역시 지원합니다.
### 트랜스파일만 수행 {#transpile-only}
@@ -65,7 +65,7 @@ export type { T }
이를 감지하기 위해 `tsconfig.json` 내 `compilerOptions` 설정을 `"isolatedModules": true`와 같이 설정해줘야만 하며, 이 설정으로 TS가 위와 같은 상황에서 작동하지 않는 기능들에 대해 경고할 수 있게 됩니다.
-일부 라이브러리는 `"isolatedModules": true`로 설정할 경우 타입 체크가 정상적으로 동작하지 않습니다. 이러한 경우에는 해당 모듈이 이슈를 수정할 때 까지 `"skipLibCheck": true`를 사용해 오류가 발생되지 않도록 해주세요.
+일부 라이브러리는 `"isolatedModules": true`로 설정할 경우 타입 체크가 정상적으로 동작하지 않습니다. 이러한 경우에는 해당 모듈이 이슈를 수정할 때까지 `"skipLibCheck": true`를 사용해 오류가 발생되지 않도록 해주세요.
#### `useDefineForClassFields` {#usedefineforclassfields}
@@ -88,12 +88,13 @@ Vite 2.5.0 부터는 TypeScript의 변환 대상이 `ESNext` 또는 `ES2022` 이
- [TypeScript 문서](https://www.typescriptlang.org/tsconfig#target)
-Vite는 `esbuild`와 동일하게 기본적으로 설정된 `target` 값으로 TypeScript를 트랜스파일하지 않습니다.
+Vite는 `esbuild`와 동일하게 `tsconfig.json` 내 `target` 값을 무시합니다.
-이 대신 [`esbuild.target`](/config/shared-options.html#esbuild) 옵션을 사용할 수 있으며, 이는 최소한의 트랜스파일링을 위해 `esnext`로 기본 설정되어 있습니다. 빌드 시, 높은 우선순위를 갖는 [`build.target`](/config/build-options.html#build-target) 옵션을 사용할 수도 있습니다.
+개발 시 `target`을 지정하고자 한다면 [`esbuild.target`](/config/shared-options.html#esbuild) 옵션을 사용할 수 있으며, 최소한의 트랜스파일링을 위해 `esnext`로 기본 설정되어 있습니다. 빌드 시 `esbuild.target`보다 높은 우선순위를 갖는 [`build.target`](/config/build-options.html#build-target) 옵션을 사용할 수도 있습니다.
::: warning `useDefineForClassFields`
-`target`이 `ESNext` 또는 `ES2022` 이상이 아니거나, `tsconfig.json` 파일이 존재하지 않는 경우, `useDefineForClassFields`는 기본적으로 `false`로 설정되는데, 이를 `esbuild.target`의 기본값인 `esnext`와 함께 사용할 경우 문제가 발생할 수 있습니다. 이는 [정적 초기화 블록](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks#browser_compatibility)으로 트랜스파일링되어 브라우저에서 지원되지 않을 수 있기 때문입니다.
+
+If `target` in `tsconfig.json` is not `ESNext` or `ES2022` or newer, or if there's no `tsconfig.json` file, `useDefineForClassFields` will default to `false` which can be problematic with the default `esbuild.target` value of `esnext`. It may transpile to [static initialization blocks](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks#browser_compatibility) which may not be supported in your browser.
따라서, `target`을 `ESNext` 또는 `ES2022` 이상으로 설정하거나, `tsconfig.json`을 구성할 때 `useDefineForClassFields`를 명시적으로 `true`로 설정하는 것을 권장합니다.
:::
@@ -125,7 +126,7 @@ vite는 기본적으로 Node.js API 기반의 타입 시스템을 차용하고
또는 `tsconfig.json` 내 `compilerOptions.types` 옵션에 `vite/client`를 명시해 줄 수도 있습니다:
-```json
+```json [tsconfig.json]
{
"compilerOptions": {
"types": ["vite/client"]
@@ -159,6 +160,50 @@ vite는 기본적으로 Node.js API 기반의 타입 시스템을 차용하고
:::
+## HTML {#html}
+
+HTML 파일은 Vite 프로젝트에서 [중심적인 역할](/guide/#index-html-and-project-root)을 하며, 애플리케이션 진입점으로 사용됩니다. 이를 통해 단일 페이지 및 [다중 페이지 애플리케이션](/guide/build.html#multi-page-app)을 쉽게 구축할 수 있습니다.
+
+프로젝트 루트에 있는 모든 HTML 파일은 해당 디렉터리 경로로 직접 접근할 수 있습니다:
+
+- `/index.html` -> `http://localhost:5173/`
+- `/about.html` -> `http://localhost:5173/about.html`
+- `/blog/index.html` -> `http://localhost:5173/blog/index.html`
+
+`
+
+