Vite 構(gòu)建生產(chǎn)版本

當(dāng)需要將應(yīng)用部署到生產(chǎn)環(huán)境時(shí)，只需運(yùn)行 vite build 命令。默認(rèn)情況下，它使用<root>/index.html 作為其構(gòu)建入口點(diǎn)，并生成能夠靜態(tài)部署的應(yīng)用程序包。

瀏覽器兼容性

用于生產(chǎn)環(huán)境的構(gòu)建包會(huì)假設(shè)目標(biāo)瀏覽器支持現(xiàn)代 JavaScript 語法。默認(rèn)情況下，Vite 的目標(biāo)瀏覽器是指能夠 支持原生 ESM script 標(biāo)簽 和 支持原生 ESM 動(dòng)態(tài)導(dǎo)入 的。作為參考，Vite 使用這個(gè) browserslist 作為查詢標(biāo)準(zhǔn)：

defaults and supports es6-module and supports es6-module-dynamic-import, not opera > 0, not samsung > 0, not and_qq > 0

你也可以通過 ?build.target? 配置項(xiàng) 指定構(gòu)建目標(biāo)，最低支持 ?es2015?。

請注意，默認(rèn)情況下 Vite 只處理語法轉(zhuǎn)譯，且 默認(rèn)不包含任何 polyfill。你可以前往 Polyfill.io 查看，這是一個(gè)基于用戶瀏覽器 User-Agent 字符串自動(dòng)生成 polyfill 包的服務(wù)。

傳統(tǒng)瀏覽器可以通過插件 @vitejs/plugin-legacy 來支持，它將自動(dòng)生成傳統(tǒng)版本的 chunk 及與其相對(duì)應(yīng) ES 語言特性方面的 polyfill。兼容版的 chunk 只會(huì)在不支持原生 ESM 的瀏覽器中進(jìn)行按需加載。

公共基礎(chǔ)路徑

如果你需要在嵌套的公共路徑下部署項(xiàng)目，只需指定 ?base ?配置項(xiàng)，然后所有資源的路徑都將據(jù)此配置重寫。這個(gè)選項(xiàng)也可以通過命令行參數(shù)指定，例如 ?vite build --base=/my/public/path/?。

由 JS 引入的資源 URL，CSS 中的 ?url()? 引用以及 ?.html? 文件中引用的資源在構(gòu)建過程中都會(huì)自動(dòng)調(diào)整，以適配此選項(xiàng)。

當(dāng)然，情況也有例外，當(dāng)訪問過程中需要使用動(dòng)態(tài)連接的 url 時(shí)，可以使用全局注入的 ?import.meta.env.BASE_URL? 變量，它的值為公共基礎(chǔ)路徑。注意，這個(gè)變量在構(gòu)建時(shí)會(huì)被靜態(tài)替換，因此，它必須按 ?import.meta.env.BASE_URL? 的原樣出現(xiàn)（例如 ?import.meta.env['BASE_URL']? 是無效的）

自定義構(gòu)建

構(gòu)建過程可以通過多種構(gòu)建配置選項(xiàng)來自定義構(gòu)建。具體來說，你可以通過 build.rollupOptions 直接調(diào)整底層的 Rollup 選項(xiàng)：

// vite.config.js
module.exports = defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
    }
  }
})

例如，你可以使用僅在構(gòu)建期間應(yīng)用的插件來指定多個(gè) Rollup 輸出。

文件變化時(shí)重新構(gòu)建

你可以使用 vite build --watch 來啟用 rollup 的監(jiān)聽器?；蛘?，你可以直接通過 build.watch 調(diào)整底層的 ?WatcherOptions ?選項(xiàng)：

// vite.config.js
module.exports = defineConfig({
  build: {
    watch: {
      // https://rollupjs.org/guide/en/#watch-options
    }
  }
})

多頁面應(yīng)用模式

假設(shè)你有下面這樣的項(xiàng)目文件結(jié)構(gòu)

├── package.json
├── vite.config.js
├── index.html
├── main.js
└── nested
    ├── index.html
    └── nested.js

在開發(fā)過程中，簡單地導(dǎo)航或鏈接到 ?/nested/? - 將會(huì)按預(yù)期工作，與正常的靜態(tài)文件服務(wù)器表現(xiàn)一致。

在構(gòu)建過程中，你只需指定多個(gè) ?.html? 文件作為入口點(diǎn)即可：

// vite.config.js
const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html')
      }
    }
  }
})

如果你指定了另一個(gè)根目錄，請記住，在解析輸入路徑時(shí)，__dirname 的值將仍然是 vite.config.js 文件所在的目錄。因此，你需要把對(duì)應(yīng)入口文件的 root 的路徑添加到 resolve 的參數(shù)中。

庫模式

當(dāng)你開發(fā)面向?yàn)g覽器的庫時(shí)，你可能會(huì)將大部分時(shí)間花在該庫的測試/演示頁面上。在 Vite 中你可以使用 ?index.html? 獲得如絲般順滑的開發(fā)體驗(yàn)。

當(dāng)這個(gè)庫要進(jìn)行發(fā)布構(gòu)建時(shí)，請使用 ?build.lib? 配置項(xiàng)，以確保將那些你不想打包進(jìn)庫的依賴進(jìn)行外部化處理，例如 ?vue ?或 ?react?：

// vite.config.js
const path = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      // 確保外部化處理那些你不想打包進(jìn)庫的依賴
      external: ['vue'],
      output: {
        // 在 UMD 構(gòu)建模式下為這些外部化的依賴提供一個(gè)全局變量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

使用如上配置運(yùn)行 vite build 時(shí)，將會(huì)使用一套面向庫的 Rollup 預(yù)設(shè)，并且將為該庫提供兩種構(gòu)建格式：es 和 umd (可在 build.lib 中配置)：

$ vite build
building for production...
[write] my-lib.es.js 0.08kb, brotli: 0.07kb
[write] my-lib.umd.js 0.30kb, brotli: 0.16kb

推薦在你庫的 package.json 中使用如下格式：

推薦在你庫的 package.json 中使用如下格式：

{
  "name": "my-lib",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.js",
  "module": "./dist/my-lib.es.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.umd.js"
    }
  }
}