江苏龙网

  1. 主页 > 生活百科 > >

京东快递H5项目接入vite实战

h5

本文介绍了如何在开发阶段将vite应用于vue 2.x 工程，从而提高研发的开发体验与效率 。主要涉及如何兼容process变量，如何处理 node-sass 与 dart-sass冲突，以及路径别名的兼容处理等 。通过这篇文章可以为读者在vite接入过程中遇到的问题提供一些解决方案, 并帮助读者理清vue工程接入vite的具体思路 。本文主要从整体介绍了新版会员徽章系统的设计方案以及未来规划，主要描述了等级模型的设计思路，读者可以通过本文对徽章系统的核心功能有初步的了解 。
01前言随着H5 项目迭代，项目的启动时长在慢慢增长，目前H5的首次启动时长约为 1分钟；且文件的更新也可能触发大范围的依赖重新打包 。vite、snowpack等bundless类型的打包工具的出现就是为了解决这个问题 。本文将结合实际项目（京东快递H5）实现 vite 打包工具的无痛接入 。由于目前未考虑在正式环境中使用vite进行构建，因此接入过程中需要考虑与现有打包方式的兼容问题 。
02徽章产品体系首先解决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 相关配置
  • sass：css预处理语言所需基础库
03模板文件index.html1.相比 vue-cli构建的项目，模板文件的位置需要更改，为了同时兼容 vue-cli 打包与vite打包，因此需要在根目录下新增 index.html 。
2.模板文件需要主动导入项目入口文件 main.js/ts
【HTML/XML】<script type="module" src=https://www.isolves.com/it/cxkf/ydd/html5/2023-03-17/"/src/main.js">04项目启动问题1. vue 中 /deep/ 方式覆盖深层组件样式的方式不可用，需要替换为 ::v-deep；
2.所有的单文件组件导入必须包含 .vue 扩展；
3.style 中 通过 ～@ 方式书写的路径需要额外的通过 resolve.alias 设置路径别名 。
【JAVAscript】'~@': resolve(__dirname, 'src')4.提示 global 不存在，需要做兼容处理，通过模板文件（index.html）在全局添加 global，当然也可以通过vite的插件（
vite-plugin-global-polyfill）实现 global 变量的兼容，使用方式可参考源代码库说明 。
【HTML/XML】<script> global=globalThis </script>5. 运行时提示 process 不存在，vite 中已经不通过 process 获取自定义的变量，需要使用 import.meta，但是考虑到 vite 仅用于开发阶段，不应对项目进行破坏性兼容，因此考虑在全局自定义 process 。vite 通过 define 配置自定义全局变量 。
【京东快递H5项目接入vite实战】【JavaScript】define: {// 单独使用这种方式 并不能在运行时获取 env 中设置的变量，'process.env': process.env,}通过实现简单的命令行工具来根据当前运行环境读取配置文件来对 process 进行数据的补充：
【Javascript】// env 类型文件读取const dotenv = require('dotenv')// 扩展 processconst { expand } = require('dotenv-expand')// 命令行参数拆分const minimist = require('minimist');// 获取环境变量function loadEnv (mode) {const basePath = resolve(__dirname, `.env${mode ? `.${mode}` : ``}`)const localPath = `${basePath}.local`const load = envPath => {// 根据 当前 命令行 mode 读取 env 中的参数配置const env = dotenv.config({ path: envPath, debug: process.env.DEBUG })// 扩展 processexpand(env)}load(localPath)load(basePath)}// 获取命令行中的 参数const parmas = minimist(process.argv.slice(2))// 目前只考虑 modeloadEnv(parmas.mode)// ...export default defineConfig({define: {'process.env': process.env,})6. rollup 中不支持动态require 打包编译，而由于H5 中多平台sdk 冲突问题，目前必须通过动态导入的方式避免 api 冲突，因此会导致浏览器报错 。解决方案在模板文件中对sdk API 做兼容处理，防止报错 。
另外有其它兼容思路，如通过 import 替换 require，但是 import 为异步导入，需要配合顶层await 方式才能比较优雅的实现sdk 的动态导入，但是vue-cli 中目前没有通过配置实现顶层await 的兼容 。
【HTML/XML】<script>function require() {return {default: {init: () => {},scanCode: () => new Promise((resolve, reject) => {}),initVoice: () => {},startRecord: () => {},stopRecord: () => {},jumpPage: url => {window.location.href = https://www.isolves.com/it/cxkf/ydd/html5/2023-03-17/url;},ready: () => Promise.resolve(),backPage: (delta = 1) => {window.history.go(-delta);},postMessage: () => {},getLocation: () => Promise.resolve({ lat: 0, lng: 0 })}}}


推荐阅读


上一篇：赏花正当时，北京发布10条赏花主题游线路

下一篇：SQL SERVER日志文件很大20多G日志文件清理 无需分离数据库 SQL命令