本文介紹了如何在開發(fā)階段將vite應(yīng)用于vue 2.x 工程，從而提高研發(fā)的開發(fā)體驗與效率。主要涉及如何兼容process變量，如何處理 node-sass 與 dart-sass沖突，以及路徑別名的兼容處理等。通過這篇文章可以為讀者在vite接入過程中遇到的問題提供一些解決方案, 并幫助讀者理清vue工程接入vite的具體思路。本文主要從整體介紹了新版會員徽章系統(tǒng)的設(shè)計方案以及未來規(guī)劃，主要描述了等級模型的設(shè)計思路，讀者可以通過本文對徽章系統(tǒng)的核心功能有初步的了解。

01前言

隨著H5 項目迭代，項目的啟動時長在慢慢增長，目前H5的首次啟動時長約為 1分鐘；且文件的更新也可能觸發(fā)大范圍的依賴重新打包。vite、snowpack等bundless類型的打包工具的出現(xiàn)就是為了解決這個問題。本文將結(jié)合實際項目（京東快遞H5）實現(xiàn) vite 打包工具的無痛接入。由于目前未考慮在正式環(huán)境中使用vite進(jìn)行構(gòu)建，因此接入過程中需要考慮與現(xiàn)有打包方式的兼容問題。

02徽章產(chǎn)品體系

首先解決vite 需要的項目依賴，主要需要添加的項目依賴如下列出：

vite
vite-plugin-vue2 ：官方提供的vite插件，用于兼容 vue2打包
@vitejs/plugin-legacy: 用于配置需要適配的低版本瀏覽器
vite-plugin-html: "^2.0.7"：用于在模板文件中注入代碼，注意版本高版本可能需要更改
vue-template-compiler：vue單文件組件編譯插件，要跟 vue版本一致
@rollup/plugin-babel: babel 相關(guān)配置
sass：css預(yù)處理語言所需基礎(chǔ)庫

03模板文件index.html

1.相比 vue-cli構(gòu)建的項目，模板文件的位置需要更改，為了同時兼容 vue-cli 打包與vite打包，因此需要在根目錄下新增 index.html。

2.模板文件需要主動導(dǎo)入項目入口文件 main.js/ts

【HTML/XML】
<script type="module" src="/src/main.js"></script>

04項目啟動問題

1. vue 中 /deep/ 方式覆蓋深層組件樣式的方式不可用，需要替換為 ::v-deep；

2.所有的單文件組件導(dǎo)入必須包含 .vue 擴(kuò)展；

3.style 中通過～@ 方式書寫的路徑需要額外的通過 resolve.alias 設(shè)置路徑別名。

【JAVAscript】
     '~@': resolve(__dirname, 'src')

4.提示 global 不存在，需要做兼容處理，通過模板文件（index.html）在全局添加 global，當(dāng)然也可以通過vite的插件（
vite-plugin-global-polyfill）實現(xiàn) global 變量的兼容，使用方式可參考源代碼庫說明。

【HTML/XML】
     <script> global=globalThis </script>

5. 運(yùn)行時提示 process 不存在，vite 中已經(jīng)不通過 process 獲取自定義的變量，需要使用 import.meta，但是考慮到 vite 僅用于開發(fā)階段，不應(yīng)對項目進(jìn)行破壞性兼容，因此考慮在全局自定義 process。vite 通過 define 配置自定義全局變量。

【JavaScript】
define: {
// 單獨(dú)使用這種方式 并不能在運(yùn)行時獲取 env 中設(shè)置的變量，
    'process.env': process.env,
}

通過實現(xiàn)簡單的命令行工具來根據(jù)當(dāng)前運(yùn)行環(huán)境讀取配置文件來對 process 進(jìn)行數(shù)據(jù)的補(bǔ)充：

【Javascript】
// env 類型文件讀取const dotenv = require('dotenv')
// 擴(kuò)展 process
   const { expand } = require('dotenv-expand')
// 命令行參數(shù)拆分
   const minimist = require('minimist');
// 獲取環(huán)境變量
function loadEnv (mode) {
   const basePath = resolve(__dirname, `.env${mode ? `.${mode}` : ``}`)
   const localPath = `${basePath}.local`


   const load = envPath => {
// 根據(jù) 當(dāng)前 命令行 mode 讀取 env 中的參數(shù)配置
     const env = dotenv.config({ path: envPath, debug: process.env.DEBUG })
// 擴(kuò)展 process
     expand(env)
  }


   load(localPath)
   load(basePath)
}
// 獲取命令行中的 參數(shù)
   const parmas = minimist(process.argv.slice(2))
// 目前只考慮 mode
   loadEnv(parmas.mode)


// ...
  export default defineConfig({
     define: {
        'process.env': process.env,
})

6. rollup 中不支持動態(tài)require 打包編譯，而由于H5 中多平臺sdk 沖突問題，目前必須通過動態(tài)導(dǎo)入的方式避免 api 沖突，因此會導(dǎo)致瀏覽器報錯。解決方案在模板文件中對sdk API 做兼容處理，防止報錯。

另外有其它兼容思路，如通過 import 替換 require，但是 import 為異步導(dǎo)入，需要配合頂層await 方式才能比較優(yōu)雅的實現(xiàn)sdk 的動態(tài)導(dǎo)入，但是vue-cli 中目前沒有通過配置實現(xiàn)頂層await 的兼容。

【HTML/XML】
     <script>
       function require() {
        return {
          default: {
            init: () => {},
            scanCode: () => new Promise((resolve, reject) => {}),
            initVoice: () => {},
            startRecord: () => {},
            stopRecord: () => {},
            jumpPage: url => {
              window.location.href = url;
          },
          ready: () => Promise.resolve(),
          backPage: (delta = 1) => {
             window.history.go(-delta);
          },
          postMessage: () => {},
          getLocation: () => Promise.resolve({ lat: 0, lng: 0 })
        }
      }
    }
   </script>

7. @jd/pandora-mobile （京東物流內(nèi)部組件庫）組件兼容問題，組件庫默認(rèn)導(dǎo)出方式與 vite 打包不兼容（具體原因可以參考vite issue），解決方案是通過路徑別名將 @jd/pandora-mobile路徑指定為 commonjs 包，或者可以通過vite中 resolve.mainFields 配置調(diào)整包搜索的優(yōu)先級順序來解決。

【Javascript】
  resolve: {
    alias: {
       '@jd/pandora-mobile': resolve(__dirname, 'node_modules/@jd/pandora-mobile/dist/pandora-mobile.js'),
    },
   // mainFields: ['main', 'module', 'jsnext:main', 'jsnext']
}

a. @jd/pandora-mobile 組件庫樣式文件導(dǎo)入不生效，解決方案有兩種，一種是通過配置 css 預(yù)處理插件配置（preprocessorOptions）將組件庫樣式添加為額外的全局樣式，但是這種方案可能存在樣式優(yōu)先級的問題；第二種是方案是通過 vite 插件 vite-plugin-style-import，實現(xiàn)樣式的按需導(dǎo)入。具體配置如下：

【Javascript】
     import { createStyleImportPlugin } from 'vite-plugin-style-import'
        createStyleImportPlugin({
          libs: [{
            libraryName: "@jd/pandora-mobile",
            esModule: true,
            resolveStyle: (name) => {
               return `@jd/pandora-mobile/es/components/${name}/style/index.css`
      },
    }]
   }),
  //css: {
  //  preprocessorOptions: {
  //    scss: {
  //      additionalData: `@import '${resolve(__dirname, 'node_modules/@jd/pandora-mobile/dist/pandora-mobile.css')}';`
  //    }
  //  }
  //},

8. sass-loader 中 node-sass 與 sass 兼容問題（與內(nèi)部組件庫pandora相關(guān)），vite中依賴sass(dart-sass)，而原項目中依賴node-sass。當(dāng)兩個依賴包同時存在時，由于 @vue/cli-service（v3.8.4）中設(shè)置了 sass-loader 優(yōu)先依賴 sass（dart-sass），從而導(dǎo)致node-sass依賴被屏蔽，在通過原有的webpack方式進(jìn)行打包時會由于 pandora 組件庫與 sass（dart-sass）不兼容導(dǎo)致打包失敗。解決方案是通過調(diào)整 vue.config 配置，將sass-loader 中對 node-sass 的依賴優(yōu)先級提高，以防止安裝 sass 后通過 vue-cli 打包報錯。

【Javascript】
// vue-cli 3.8.4
defaultSassLoaderOptions.implementation = require('sass')


// 調(diào)整 vue.config
css: {
    // ...
    loaderOptions: {
       // ...
      // sass-loader 優(yōu)先 使用 sass , pandora sass 兼容有問題
      implementation: require("node-sass"),
    }
}

05代碼方面調(diào)整

常量的導(dǎo)入導(dǎo)出在文件之間存在循環(huán)依賴報錯，需將常量統(tǒng)一導(dǎo)出處理。

06總結(jié)

兩種項目啟動結(jié)果對比如下圖：

圖1 vite 啟動H5工程

圖2 vue-cli 啟動H5工程

1. 就結(jié)果來說 vite 在項目啟動上確實速度很快，但是由于運(yùn)行時打包的方式，首次頁面交互體驗卡頓明顯；

2. sdk 兼容仍有待優(yōu)化。

【Javascript】
import { defineConfig, ViteDevServer, PluginOption, createServer } from 'vite'import legacy from '@vitejs/plugin-legacy'
import { getBabelOutputPlugin } from '@rollup/plugin-babel'
import html from 'vite-plugin-html'
import { createVuePlugin } from 'vite-plugin-vue2'
import { createStyleImportPlugin } from 'vite-plugin-style-import'
import { envSwitchPlugin } from 'vite-plugin-env-switch';
import { globalPolyfill } from 'vite-plugin-global-polyfill'
import { green } from 'picocolors'


const dotenv = require('dotenv')
const minimist = require('minimist');
const { resolve } = require('path')
// 獲取環(huán)境變量
function loadEnv (mode) {
  const basePath = resolve(__dirname, `.env${mode ? `.${mode}` : ``}`)
  const localPath = `${basePath}.local`


  const load = envPath => {
    const env = dotenv.config({ path: envPath, debug: process.env.DEBUG })
    process.env = Object.assign({...process.env}, env.parsed)
  }


  load(localPath)
  load(basePath)
}
const parmas = minimist(process.argv.slice(2))


loadEnv(parmas.mode)


export interface PluginConfig {
  envKey?: string,
  strGetter?: () => string
}


// https://vitejs.dev/config/
export default defineConfig({
  base: '/express-vite/',
  publicDir: 'public',
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '~@': resolve(__dirname, 'src'),
      // https://github.com/vitejs/vite/issues/1724#issuecomment-767619642
      // vite 讀取的文件 跟 esbuild 讀取的文件不一致， vite 讀取的 是 commonjs,但是 esbuild 找到了 esm 類型的文件認(rèn)為 不需要轉(zhuǎn)換，所以導(dǎo)致導(dǎo)出沒有做兼容
      // '@jd/pandora-mobile': resolve(__dirname, 'node_modules/@jd/pandora-mobile/dist/pandora-mobile.js'),
    },
    // 用于更改 包搜索的優(yōu)先級 具體原理見 源碼 resolvePackageEntry 方法
    // 等待新版本有 config.optimizeDeps?.needsInterop 配置，替換為該方案
    mainFields: ['main', 'module', 'jsnext:main', 'jsnext']
  },
  server: {
    host: 'xxx.jd.com',
    https: true,
    port: 443,
    open: true,
  },
  optimizeDeps: {
  },
  plugins: [
// 本地開發(fā) 通過頁面按鈕 動態(tài)切換 項目環(huán)境
// https://github.com/PengBoUESTC/vite-plugin-env-switch
    envSwitchPlugin({
      wsProtocol: 'vite-hmr',
      envs: ['prepare', 'development', 'production'],
      wsPath: 'wss://xxx.jd.com/express-vite/',
      root: __dirname,
      eventName: 'env-check'
    }),
    globalPolyfill(),
    createStyleImportPlugin({
      libs: [{
        libraryName: "@jd/pandora-mobile",
        esModule: true,
        resolveStyle: (name) => {
          return `@jd/pandora-mobile/es/components/${name}/style/index.css`
        },
      }]
    }),
    createVuePlugin({}),
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
    getBabelOutputPlugin({
      configFile: resolve(__dirname, 'babel.config.js'),
    }),
    html({
      inject: {
        injectData: {
          title: '京東快遞',
        },
      },
      minify: true,
    }),
  ],
  css: {
    preprocessorOptions: {
      // scss: {
      //   additionalData: `@import '${resolve(__dirname, 'node_modules/@jd/pandora-mobile/dist/pandora-mobile.css')}';`
      // }
    }
  },


  build: {
    outDir: 'dist',
    target: 'es2015',
    minify: 'terser',
    rollupOptions: {
      plugins: [
      ],
    },
  },
  define: {
    'process.env': process.env,
  }
})

作者：楊博