江苏龙网

  1. 主页 > 生活百科 > >

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

h5

7. @jd/pandora-mobile （京东物流内部组件库）组件兼容问题，组件库默认导出方式与 vite 打包不兼容（具体原因可以参考vite issue），解决方案是通过路径别名将 @jd/pandora-mobile路径指定为 commonjs 包，或者可以通过vite中 resolve.mainFields 配置调整包搜索的优先级顺序来解决 。
【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 组件库样式文件导入不生效，解决方案有两种，一种是通过配置 css 预处理插件配置（preprocessorOptions）将组件库样式添加为额外的全局样式，但是这种方案可能存在样式优先级的问题；第二种是方案是通过 vite 插件 vite-plugin-style-import，实现样式的按需导入 。具体配置如下：
【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 兼容问题（与内部组件库pandora相关），vite中依赖sass(dart-sass)，而原项目中依赖node-sass 。当两个依赖包同时存在时，由于 @vue/cli-service（v3.8.4）中设置了 sass-loader 优先依赖 sass（dart-sass），从而导致node-sass依赖被屏蔽，在通过原有的webpack方式进行打包时会由于 pandora 组件库与 sass（dart-sass） 不兼容导致打包失败 。解决方案是通过调整 vue.config 配置，将sass-loader 中对 node-sass 的依赖优先级提高，以防止安装 sass 后通过 vue-cli 打包报错 。
【Javascript】// vue-cli 3.8.4defaultSassLoaderOptions.implementation = require('sass')// 调整 vue.configcss: {// ...loaderOptions: {// ...// sass-loader 优先 使用 sass , pandora sass 兼容有问题implementation: require("node-sass"),}} 
05代码方面调整常量的导入导出在文件之间存在循环依赖报错，需将常量统一导出处理 。
06总结两种项目启动结果对比如下图：

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

文章插图
图1 vite 启动H5工程

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

文章插图
图2 vue-cli 启动H5工程
1. 就结果来说 vite 在项目启动上确实速度很快，但是由于运行时打包的方式，首次页面交互体验卡顿明显；
2. sdk 兼容仍有待优化 。
【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')// 获取环境变量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 类型的文件认为 不需要转换，所以导致导出没有做兼容// '@jd/pandora-mobile': resolve(__dirname, 'node_modules/@jd/pandora-mobile/dist/pandora-mobile.js'),},// 用于更改 包搜索的优先级 具体原理见 源码 resolvePackageEntry 方法// 等待新版本有 config.optimizeDeps?.needsInterop 配置，替换为该方案mainFields: ['main', 'module', 'jsnext:main', 'jsnext']},server: {host: 'xxx.jd.com',https: true,port: 443,open: true,},optimizeDeps: {},plugins: [// 本地开发 通过页面按钮 动态切换 项目环境// https://github.com/PengBoUESTC/vite-plugin-env-switchenvSwitchPlugin({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,}})


推荐阅读


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

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