Viteのフルバージョンの詳細な説明

目次

序文：

バイトシェルフ分析

1. パッケージのビルド:

2. 環境変数

3. モード

4.旧ブラウザ対応  

5. タイプスクリプト関連

6. 基本構成

コア構成の完全なコレクション

---

2 つのプラグインをお勧めします: Volar と Vue 3 スニペット

序文：

開発環境: ESM+HMR: モジュールのホット アップデートを実現するため; webpack -server 運用環境と同様: ロールアップ: パッケージ ツールのロールアップの生成は js ライブラリの開発を目的としており、生成されたコードはコードをトランスコードするためのものです。ターゲット js.other

Vite 速度は主に、高速コールド スタートと高速ホット アップデートの 2 つの側面に反映されます。このような優れたパフォーマンスの理由 は 、ブラウザが  仕様をサポートし、  まったく異なる メカニズムを採用しているVite ためです  。ViteESMWebpackunbundle

1. 高速コールド スタート: Vite は静的ページのみでサーバーを起動し、すべてのプロジェクト ファイル コードをパッケージ化するわけではありません. サーバーは、クライアントの要求に応じてさまざまなモジュールをロードし、オンデマンド ロードを実現します。最初にプロジェクト全体を起動し、次に dev-server を起動します プロジェクトが大規模な場合、パッケージング時間は非常に長くなります。

2. パッケージ化とコンパイルの速度: 本番環境にパッケージ化する必要がある場合、vite はパッケージ化に従来のロールアップを使用するため、vite の利点が開発段階に反映されます. また、vite は ES モジュールを使用するため、コードはコード CommonJs は使用できません。

3. ホット モジュール アップデート: HRM ホット アップデートに関しては、モジュールの内容が変更された場合、webpack のようにモジュールのすべての依存関係を再コンパイルする代わりに、ブラウザにモジュールを再リクエストさせるだけです。

vite の長所と短所:vite优点 -unbundle メカニズムのコア:

• モジュール間の依存関係の解決は、ブラウザーによって実装されます。
• ファイル dev server の 変換はmiddlewares 、によって実装され、キャッシュされます。
• ソース ファイルをマージおよびバンドルしないでください。

vite の短所:unbundle メカニズム により 、最初の画面の期間と遅延読み込み中に次の追加の作業を行う必要があります:Webpack 対照的に、起動プロセス中に完了するVite 必要がある 作業は 、ブラウザーの要求に応答するプロセスdev server に転送されます。  dev server、これは必然的に最初の画面のパフォーマンスの低下につながります。ただし、最初の画面のパフォーマンスの低下は、 dev server 起動後に初めてページが読み込まれたときにのみ発生します。後で ページに移動するとreload 、最初の画面のパフォーマンスが大幅に向上します。その理由は dev server 、以前に変換されたコンテンツがキャッシュされるためです。

• ソース ファイルをマージしてバンドルしないでください。大量の http リクエストが発生します。
• dev server 操作中にソースファイルに対して resolve、、、操作loadを行います 。transformparse
• ビルド前およびビルド前の二次操作も、ビルド前が完了するまで最初の画面リクエストをブロックします。

バイトシェルフ分析

1. パッケージのビルド:

 npm run build

デフォルトでは、出力を dist フォルダーにビルドします。dist このフォルダーは、任意のプラットフォームにデプロイできます 。

アプリをローカルでテストする

vite preview コマンドは、静的 Web サーバーをローカルで開始します。これは dist に ありますhttp://localhost:4173。このように、ビルド製品がローカル環境で正常に使用可能かどうかを確認する方がはるかに便利です。--port パラメーターを使用して、サービスの実行ポートを構成できます 。

これで、 preview コマンドは でサーバーを実行します http://localhost:8080。

 ブラウザを自動的に開く:

  "dev": "vite --open",
  "build": "vue-tsc --noEmit && vite build",
  "preview": "vite preview --open"

これは vite preview ローカル ビルドのプレビュー用であり、運用サーバーとして直接使用しないでください。

2. 環境変数

 Vite は特別なオブジェクトで環境変数を公開します import.meta.env 。すべての場合に使用できる組み込み変数を次に示します。

import.meta.env.MODE: {string} 应用运行的模式。

import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。

import.meta.env.PROD: {boolean} 应用是否运行在生产环境。

import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

 カスタム環境変数:
  (1) ファイルの作成: 既存の環境変数は、次のファイルによって上書きされません。

.env  # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载,如.env.production的优先级比.env高
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

読み込まれた環境変数も、 import.meta.env 文字列としてクライアント ソース コードに公開されます。

一部の環境変数が誤ってクライアントに漏洩するのを防ぐために、接頭辞 _ VITE_ がvite 処理されたコードに公開されます。たとえば、次の環境変数です。

 クライアントに提供されるソース コード として のみ VITE_SOME_KEY 公開されます が、 公開されません。import.meta.env.VITE_SOME_KEYDB_PASSWORD

  (2) 型宣言の追加

<reference types="vite/client" />

 interface ImportMetaEnv {
 readonly VITE_APP_TITLE: string
              // 更多环境变量...
 }
 
  interface ImportMeta {
  readonly env: ImportMetaEnv
  }

3. モード

デフォルトでは、開発サーバー (dev コマンド) は development (開発) モードで実行され、 build コマンドは production (実動) モードで実行されます。これは、実行されると vite build 、次の場所に存在する可能性のある環境変数を自動的にロードすること を意味します.env.production 。

 アプリケーションでは、 import.meta.env.VITE_APP_TITLE レンダー ヘッダーを使用できます。

 デフォルトの開発者と本番環境に加えて、モードをカスタマイズすることもできます. たとえば、「ステージング」(プレリリース|プレライブ) モードが必要な場合があります。変数は本番環境とは少し異なります。

 vite build --mode staging
.env.staging文件存放相关模式下的环境变量

4.旧ブラウザ対応  

デフォルトでは、Vite は構文変換のみを処理し、デフォルトではポリフィルは含まれません。polyfill の導入により: polyfill は、js主に異なるブラウザー間の js 実装の違いを滑らかにするライブラリです。Polyfill.io にアクセスして表示できます。これは、ユーザーのブラウザーの User-Agent 文字列に基づいてポリフィル パッケージを自動的に生成するサービスです プラグインによるサポート: プラグイン @vitejs/plugin-legacy によりサポートされています。従来のバージョンのチャンクとそのポリフィルに対応する ES 言語機能を自動的に生成します。互換性のあるバージョンのチャンクは、ネイティブ ESM をサポートしていないブラウザーでオンデマンドでのみ読み込まれます。

5. タイプスクリプト関連

 (1) esbuild は関数の編集をサポートしておらず、エラー
  構成タイプのインポート/エクスポート、列挙型、インポートなしの非モジュール ファイル、エクスポートのインポート/エクスポート エラー レポートを報告します。

tsconfig.json
        {
       "compilerOptions": {
       "isolatedModules":true 上述特性会在编辑时报错，否则会在运行时报错
            }
 }

(2) vite
Resource import に組み込まれているいくつかの型定義をインポートします (例: .svg ファイルをインポートします)。

.import.meta.env 上 Vite 注入的环境变量的类型定义
.import.meta.hot 上的 HMR API 类型定义

  方法 1: .d.ts で      

<reference types="vite/client" />

  方法 2: tsconfig.json 内

{
    "compilerOptions": {
    "types": ["vite/client"]
              }
}

複数ページ構成

    ├── package.json
    ├── vite.config.js
    ├── index.html
    ├── main.js
    └── nested
        ├── index.html
        └── nested.js
        
      build: {
        rollupOptions: {
          input: {
            main: resolve(__dirname, 'index.html'),
            nested: resolve(__dirname, 'nested/index.html')
          }
        }
      }

6. 基本構成

異なる環境設定コマンドを区別する
  : 実行中のコマンドに従って設定を区別し、サービスは開発環境であり、それ以外の場合は本番環境を構築する
  モードです: 環境に応じて設定を区別します  

export default defineConfig(async ({ command, mode }) => {
          const config=await fn();    支持使用Promise
          if (command === 'serve') {
            return { 
            }
          } else if(command='build'){
            return {
            }
          }
})

コア構成の完全なコレクション

export default defineConfig({

  base: "./", //开发或生产环境服务的公共基础路径, 绝对 URL 路径名，例如 /foo/
  // 完整的 URL，例如 https://foo.com/
  // 空字符串或 ./（用于开发环境）
  // 通过命令指定：vite build --base=/my/public/path/
  // 代码中获取base：import.meta.env.BASE_URL全局变量在代码中使用，
  //原样出现(例如import.meta.env['BASE_URL']是无效的)
  root: process.cwd(), // 项目根目录（index.html 文件所在的位置绝对位置或相对位置）,默认process.cwd()
  define: {
    __DEV__: 'dev',
  }, //定义全局常量替换方式。其中每项在开发环境下会被定义在全局，而在构建时被静态替换

  mode: 'development', // 模式将会把serve和build时的模式都覆盖掉。
  //也可以通过命令行 --mode 选项来重写'development'（serve）、'production'（build）
  plugins: [vue()], // 需要用到的插件数组
  publicDir: 'public', // 静态资源服务的文件夹。该目录中的文件在开发期间在 / 处提供
  //并在构建期间复制到 outDir 的根目录，并且始终按原样提供或复制而无需进行转换。
  //该值可以是文件系统的绝对路径，也可以是相对于项目的根目录的相对路径。默认'public'
  cacheDir: 'node_modules/.vite', // 存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 
  // 生成的某些缓存文件，使用缓存可以提高性能。如需重新生成缓存文件，你可以使用 --force 命令行选项
  // 或手动删除目录。此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。
  // 当没有检测到 package.json 时，则默认为 .vite。  默认"node_modules/.vite"

  // 解析相关
  resolve: {
    alias: [ // 文件系统路径别名
      {
        "@": path.resolve(__dirname, "src"),
      },
      //或
      {
        find: /\/@\//, //字符串｜正则
        replacement: pathResolve('src') + '/'
      }
    ],
    dedupe: [], // 强制 Vite 始终将列出的依赖项解析为同一副本，比如当安装了两个不同版本的依赖，
    // 如vue2和vue3，通过这个声明最终引入的版本  []
    conditions: [], // 解决程序包中 情景导出 时的其他允许条件 [{
    //     "exports": {
    //       ".": {
    //         "import": "./index.esm.js",
    //         "require": "./index.cjs.js"
    //       }
    //     }
    //   }]
    mainFields: [], // 解析包入口点尝试的字段列表 ，根据package.json中的字段，
    // 在不同环境中导入库的入口文件位置
    // import引入的文件对应module中的路径
    // require引入的文件对应main中的路径
    // 默认：['module', 'jsnext:main', 'jsnext','main']
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], //  默认：['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']导入时想要忽略的扩展名列表 导入时想要省略的扩展名列表。不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持
    preserveSymlinks: false, // 启用此选项会使 Vite 通过原始文件路径（即不跟随符号链接的路径）而不是真正的文件路径（即跟随符号链接后的路径）确定文件身份
    // 默认：false
  },

  // css相关
  css: {
    modules: { //配置 CSS modules 的行为。选项将被传递给 postcss-modules。
      scopeBehaviour: 'global' | 'local',
      // ...
    },
    postcss: '', // 内联的 PostCSS 配置 如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源
    preprocessorOptions: { // css的预处理器选项
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  },

  // JSON相关
  json: {
    namedExports: true, // 是否支持从.json文件中进行按名导入
    stringify: false, //  开启此项，导入的 JSON 会被转换为 export default JSON.parse("...") 会禁用按名导入
  },

  //esbuild相关
  esbuild: { // 最常见的用例是自定义 JSX
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
    // ESbuild会被应用在 ts、jsx、tsx 文件，以下选项对要处理的文件类型进行配置
    // include：string | RegExp | (string | RegExp)[]
    // exclude：string | RegExp | (string | RegExp)[]
    // jsxInject:自动为每一个被 ESbuild 转换的文件注入内容
    //     `import React from 'react'` 
  },

  assetsInclude: ['**/*.gltf'], // 指定额外的 picomatch 模式 作为静态资源处理
  logLevel: 'info', // 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'
  clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
  envDir: '/', // 用于加载 .env 文件的目录
  envPrefix: [], // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中

  //server相关
  server: {
    host: '127.0.0.1', // 指定服务器应该监听哪个 IP 地址
    port: 5000, // 指定开发服务器端口
    strictPort: true, // 若端口已被占用则会直接退出
    https: false, // 启用 TLS + HTTP/2
    // 当为true：启用 TLS + HTTP/2。注意：当 server.proxy 选项 也被使用时，将会仅使用 TLS。
    // 这个值也可以是一个传递给 https.createServer() 的 选项对象
    open: true, // 启动时自动在浏览器中打开应用程序
    proxy: { // 配置自定义代理规则
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        ws: true, //WebSocket
      }
    },
    cors: true, // 配置 CORS
    force: true, // 强制使依赖预构建
    hmr: { // 禁用或配置 HMR 连接 热更新相关
      // false禁用
      protocol: string, //协议
      host: string,
      port: number,
      path: string,
      timeout: number,
      overlay: boolean, //为 false 可以禁用开发服务器错误的屏蔽
      clientPort: number, //只在客户端的情况下覆盖端口，这允许你为 websocket 提供不同的端口，而并非在客户端代码中查找。如果需要在 dev-server 情况下使用 SSL 代理，这非常有用。
      server: Server, //当使用 server.middlewareMode 或 server.https 时，你需将 server.hmr.server 指定为你 HTTP(S) 的服务器，这将通过你的服务器来处理 HMR 的安全连接请求。这在使用自签证书或想通过网络在某端口暴露 Vite 的情况下，非常有用。
    },
    watch: { // 传递给 chokidar 的文件系统监听器选项 监听文件改变
      // 通过命令:vite build --watch
      ignored: ['!**/node_modules/your-package-name/**'] //      默认会忽略对 .git/ 和 node_modules/ 目录的监听,如果需要对 node_modules/ 内的包进行监听，可以为 server.watch.ignored 赋值一个取反的 glob 模式
      // 其他选项：使用的是rollup的选项配置:https://rollupjs.org/guide/en/#watch-options
    },
    middlewareMode: '', // 以中间件模式创建 Vite 服务器 'ssr' | 'html'    在SSR中使用
    fs: {
      strict: true, // 限制为工作区 root 路径以外的文件的访问
      allow: [], // 限制哪些文件可以通过 /@fs/ 路径提供服务
      deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 开发服务器提供敏感文件的黑名单
    },
    origin: 'http://127.0.0.1:8080/', // 用于定义开发调试阶段生成资产的 origin
  },

  //build构建相关
  build: {
    target: ['modules'], // 设置最终构建的浏览器兼容目标   默认：'modules'指支持原生 ES 模块的浏览器。
    //  "esnext" ：即假设有原生动态导入支持，并且将会转译得尽可能小：
    //  如果 build.minify 选项为 'terser'， 'esnext' 将会强制降级为 'es2019'。
    //  其他情况下将完全不会执行转译。
    // 'es2015'：自定义目标也可以是一个 ES 版本
    polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill true：此 polyfill 会被自动注入到每个 index.html 入口的 proxy 模块中
    outDir: 'dist', // 指定输出路径
    assetsDir: 'assets', // 指定生成静态文件目录
    assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
    cssCodeSplit: true, // 启用 CSS 代码拆分
    cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
    sourcemap: false, // 构建后是否生成 source map 文件
    rollupOptions: {}, // 自定义底层的 Rollup 打包配置
    lib: {}, // 构建为库
    manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
    ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
    ssr: undefined, // 生成面向 SSR 的构建
    minify: 'esbuild', // 指定使用哪种混淆器
    terserOptions: {}, // 传递给 Terser 的更多 minify 选项
    write: true, // 启用将构建后的文件写入磁盘
    emptyOutDir: true, // 构建时清空该目录
    brotliSize: true, // 启用 brotli 压缩大小报告
    chunkSizeWarningLimit: 500, // chunk 大小警告的限制
    watch: null, // 设置为 {} 则会启用 rollup 的监听器
  },

  // 构建预览preview相关
  preview: {
    port: 5000, // 指定开发服务器端口
    strictPort: true, // 若端口已被占用则会直接退出
    https: false, // 启用 TLS + HTTP/2
    open: true, // 启动时自动在浏览器中打开应用程序
    proxy: { // 配置自定义代理规则
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    cors: true, // 配置 CORS
  },
  optimizeDeps: {
    entries: [], // 指定自定义条目——该值需要遵循 fast-glob 模式
    exclude: [], // 在预构建中强制排除的依赖项
    include: [], // 可强制预构建链接的包
    keepNames: false, // true 可以在函数和类上保留 name 属性
  },

  // SSR相关
  ssr: {
    external: [], // 列出的是要为 SSR 强制外部化的依赖,
    noExternal: '', // 列出的是防止被 SSR 外部化依赖项
    target: 'node', // SSR 服务器的构建目标
  },

  // Worker相关
  worker: {
    format: iife, //worker bundle 的输出类型。 默认： 'iife'   'es',
    plugins: [], //适用于 worker bundle 的 Vite 插件。 []
    rollupOptions: [], //用于构建 worker bundle 的 Rollup 配置项
  }
})