Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions config/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,9 @@ Vite はデフォルトでは `.env` ファイルをロードしないことに
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
// `mode` に基づいて現在の作業ディレクトリーにある env ファイルをロードする
// `VITE_` プレフィックスに関係なく全ての環境変数をロードするには、第 3 引数に '' を設定します
// `mode` に基づいて現在の作業ディレクトリーにある env ファイルをロードする。
// `VITE_` プレフィックスに関係なく全ての環境変数をロードするには、
// 第 3 引数に '' を設定します
const env = loadEnv(mode, process.cwd(), '')
return {
// vite の設定
Expand Down
28 changes: 19 additions & 9 deletions config/server-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,15 +101,21 @@ export default defineConfig({
export default defineConfig({
server: {
proxy: {
// 文字列のショートハンド: http://localhost:5173/foo -> http://localhost:4567/foo
// 文字列のショートハンド:
// http://localhost:5173/foo
// -> http://localhost:4567/foo
'/foo': 'http://localhost:4567',
// オプションを使用: http://localhost:5173/api/bar-> http://jsonplaceholder.typicode.com/bar
// オプションを使用:
// http://localhost:5173/api/bar
// -> http://jsonplaceholder.typicode.com/bar
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
// 正規表現を使用: http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
// 正規表現を使用:
// http://localhost:5173/fallback/
// -> http://jsonplaceholder.typicode.com/
'^/fallback/.*': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
Expand All @@ -123,8 +129,11 @@ export default defineConfig({
// プロキシは 'http-proxy' のインスタンスになります
},
},
// Web ソケット か socket.io をプロキシ化: ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
// `rewriteWsOrigin` を使用すると、プロキシが CSRF 攻撃に無防備なままになる可能性があるため、使用には注意してください。
// Web ソケット か socket.io をプロキシ化:
// ws://localhost:5173/socket.io
// -> ws://localhost:5174/socket.io
// `rewriteWsOrigin` を使用すると、プロキシが CSRF 攻撃に無防備になる
// 可能性があるため、使用には注意してください。
'/socket.io': {
target: 'ws://localhost:5174',
ws: true,
Expand Down Expand Up @@ -251,16 +260,17 @@ async function createServer() {
// ミドルウェアモードで Vite サーバーを作成
const vite = await createViteServer({
server: { middlewareMode: true },
appType: 'custom', // ViteのデフォルトのHTMLを処理するミドルウェアを含めない
// Viteのデフォルトの HTML を処理するミドルウェアを含めない
appType: 'custom',
})
// vite の接続インスタンスをミドルウェアとして使用
app.use(vite.middlewares)

app.use('*', async (req, res) => {
// `appType` が `'custom'` なので、ここでレスポンスを返すべきです。
// 注: `appType` が `'spa'` または `'mpa'` の際は、Vite に HTML リクエスト と 404 になる
// リクエストを処理するミドルウェアが含まれます。したがって、ユーザーのミドルウェアが
// 動作するためにはViteのミドルウェアよりも前に追加されるべきです
// 注: `appType` が `'spa'` または `'mpa'` の際は、Vite に HTML リクエスト と
// 404 を処理するミドルウェアが含まれるため、ユーザーのミドルウェアが
// 動作するためには Vite のミドルウェアよりも前に追加されるべきです
})
}

Expand Down
18 changes: 10 additions & 8 deletions guide/api-environment-frameworks.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ export class RunnableDevEnvironment extends DevEnvironment {

class ModuleRunner {
/**
* 実行するURL。ルートからの相対的なファイルパス、サーバーパス、ID を受け付けます。
* 実行するURL。
* ルートからの相対的なファイルパス、サーバーパス、ID を受け付けます。
* インスタンス化されたモジュールを返します (ssrLoadModule と同じ)
*/
public async import(url: string): Promise<Record<string, any>>
Expand Down Expand Up @@ -52,20 +53,21 @@ const server = await createServer({
appType: 'custom',
environments: {
server: {
// デフォルトでは、開発中はモジュールは vite 開発サーバーと同じプロセスで実行されます
// デフォルトでは、モジュールは vite サーバーと同じプロセスで実行されます
},
},
})

// TypeScript では、これを RunnableDevEnvironment にキャストするか、ランナーへのアクセスを
// 保護するために "isRunnableDevEnvironment" 関数を使用する必要があるかもしれません
// TypeScript でこれを RunnableDevEnvironment にキャストするか、ランナーへのアクセスを
// 保護するために isRunnableDevEnvironment を使用する必要があるかもしれません
const environment = server.environments.node

app.use('*', async (req, res, next) => {
const url = req.originalUrl

// 1. index.html を読み込む
let template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8')
const indexHtmlPath = path.resolve(__dirname, 'index.html')
let template = fs.readFileSync(indexHtmlPath, 'utf-8')

// 2. Vite HTML 変換を適用します。これにより、Vite HMR クライアントが挿入され、
// Vite プラグインからの HTML 変換も適用されます。
Expand Down Expand Up @@ -112,7 +114,7 @@ const server = createServer()
const ssrEnvironment = server.environment.ssr
const input = {}

const { createHandler } = await ssrEnvironment.runner.import('./entrypoint.js')
const { createHandler } = await ssrEnvironment.runner.import('./entry.js')
const handler = createHandler(input)
const response = handler(new Request('/'))

Expand Down Expand Up @@ -186,10 +188,10 @@ function vitePluginVirtualIndexHtml(): Plugin {
let html: string
if (server) {
this.addWatchFile('index.html')
html = await fs.promises.readFile('index.html', 'utf-8')
html = fs.readFileSync('index.html', 'utf-8')
html = await server.transformIndexHtml('/', html)
} else {
html = await fs.promises.readFile('dist/client/index.html', 'utf-8')
html = fs.readFileSync('dist/client/index.html', 'utf-8')
}
return `export default ${JSON.stringify(html)}`
}
Expand Down
5 changes: 3 additions & 2 deletions guide/api-environment-plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,14 +135,15 @@ const UnoCssPlugin = () => {
// 共有グローバル状態
return {
buildStart() {
// WeakMap<Environment,Data>, this.environment を使って環境ごとの状態を初期化
// WeakMap<Environment,Data>, this.environment を使って
// 環境ごとの状態を初期化
},
configureServer() {
// グローバルフックを通常どおり使用
},
applyToEnvironment(environment) {
// このプラグインがこの環境でアクティブになる必要がある場合は true を返します
// この関数が提供されていない場合、プラグインはすべての環境でアクティブになります
// フックが使用されていない場合、プラグインはすべての環境でアクティブになります
},
resolveId(id, importer) {
// このプラグインが適用される環境に対してのみ呼び出されます
Expand Down
28 changes: 19 additions & 9 deletions guide/api-environment-runtimes.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,11 @@ Vite モジュールランナーは、最初に Vite プラグインで処理す
```ts
import { DevEnvironment, RemoteEnvironmentTransport } from 'vite'

function createWorkerdDevEnvironment(name: string, config: ResolvedConfig, context: DevEnvironmentContext) {
function createWorkerdDevEnvironment(
name: string,
config: ResolvedConfig,
context: DevEnvironmentContext
) {
const hot = /* ... */
const connection = /* ... */
const transport = new RemoteEnvironmentTransport({
Expand Down Expand Up @@ -120,20 +124,21 @@ export class ModuleRunner {
private debug?: ModuleRunnerDebugger,
) {}
/**
* 実行するURL。ルートからの相対的なファイルパス、サーバーパス、ID を受け付けます。
* 実行するURL。
* ルートからの相対的なファイルパス、サーバーパス、ID を受け付けます。
*/
public async import<T = any>(url: string): Promise<T>
/**
* HMR リスナーを含むすべてのキャッシュをクリアします。
*/
public clearCache(): void
/**
* すべてのキャッシュをクリアし、すべての HMR リスナーを削除し、ソースマップのサポートをリセットします
* 全キャッシュをクリア、全 HMR リスナーを削除、ソースマップサポートをリセットします
* このメソッドは HMR 接続を停止しません。
*/
public async close(): Promise<void>
/**
* `close()` メソッドを呼び出してランナーを終了した場合は `true` を返します。
* `close()` を呼び出してランナーを終了した場合は `true` を返します。
*/
public isClosed(): boolean
}
Expand Down Expand Up @@ -174,9 +179,12 @@ export interface ModuleRunnerOptions {
*/
transport: RunnerTransport
/**
* ソースマップの解決方法を設定します。`process.setSourceMapsEnabled` が使用可能な場合は `node` を優先します。
* それ以外の場合は、デフォルトで `prepareStackTrace` を使用し、`Error.prepareStackTrace` メソッドをオーバーライドします。
* Vite によって処理されなかったファイルのファイル内容とソースマップの解決方法を設定するオブジェクトを提供できます。
* ソースマップの解決方法を設定します。
* `process.setSourceMapsEnabled` が使用可能な場合は `node` を優先します。
* それ以外の場合は、デフォルトで `prepareStackTrace` を使用し、
* `Error.prepareStackTrace` メソッドをオーバーライドします。
* Vite によって処理されなかったファイルのファイル内容とソースマップの解決方法を設定する
* オブジェクトを提供できます。
*/
sourcemapInterceptor?:
| false
Expand All @@ -199,7 +207,8 @@ export interface ModuleRunnerOptions {
logger?: false | HMRLogger
}
/**
* カスタムモジュールキャッシュ。指定されていない場合は、モジュールランナーインスタンスごとに個別のモジュールキャッシュが作成されます。
* カスタムモジュールキャッシュ。指定されていない場合は、モジュールランナーの
* インスタンスごとに個別のモジュールキャッシュが作成されます。
*/
evaluatedModules?: EvaluatedModules
}
Expand Down Expand Up @@ -344,7 +353,8 @@ export interface ModuleRunnerHMRConnection {
send(payload: HotPayload): void
/**
* この接続が更新をトリガーしたときに HMR がどのように処理されるかを設定します。
* このメソッドは、接続が HMR 更新のリッスンを開始し、受信時にこのコールバックを呼び出すことを想定しています。
* このメソッドは、接続が HMR 更新のリッスンを開始し、受信時にこのコールバックを
* 呼び出すことを想定しています。
*/
onUpdate(callback: (payload: HotPayload) => void): void
}
Expand Down
4 changes: 3 additions & 1 deletion guide/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -337,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
}
Expand Down