实际项目中vite的一些使用

vite在前端领域已经很流行了,讲解vite的文章也都比较深入，但为什么还要写这篇文章呢。主要是因为网上大多都是讲解vite原理，和vite在前端页面构建的使用。而我的项目是一个node项目+两个页面。在构建这块自己也做了好久，有一点点感想，给大家一个参考罢了

同事小明在项目引入了log4j日志模块, 用来记录服务的一些行为. 我们的产物构建好后需要给其部门使用. 我们测试的时候发现报错,大概意思是rfdc依赖没有打入是log4js依赖了这个包

js 复制代码

require('log4j')

项目中是通过require导入这个包的.

很多人说vite中不能使用require. 这中方法不是很准确.

实际上是我们vite脚手架生成的项目不推荐require. 因为他打开了ts的约束规则no-var-requires. 我们关掉这个规则就可以了. 这个规则过期了,现在是no-require-imports

但vite并没有将require依赖打入产物.是因为vite基于rollup打包的, rollup默认不支持require (是因为不支持commonjs包) ,但可以通过插件去实现

官网介绍得很详细

rollup 默认不会打包node_modules目录下的包, 他的处理是将node_moduels下的依赖转为require 比如 the-answer 但我们直接导入 import answer from 'the-answer'; 生成的 bundle.js 仍然可以在 Node.js 中使用，因为 import 声明会被转换为 CommonJS 的 require 语句，但是 the-answer 不会被包含在 bundle 中。下图是编译好的bunde ,可以看到import转换成了require

为此，我们需要一个插件。。plugin-node-resolve 来解决.

plugin-node-resolve 只能处理提供了node_modules中暴露es模块的包

但大多数 NPM 上的包都以 CommonJS 模块的方式暴露。在这种情况下，我们需要在 Rollup 处理它们之前将 CommonJS 转换为 ES2015。plugin-commonjs 插件就是用来做这件事的。

所以理论上有这两个插件rollup和vite就都可以处理commonjs依赖了.

但这里有一个细节,就是commonjs中的一些配置

transformMixedEsModules 根据项目需求决定是否启用混合模块转换。

设置transformMixedEsModules为true，即控制是否启用混合模块转换。例如在包含ES import语句和CommonJS require表达式的模块，设置为true时，将将require调用转换为import语句。设置为false时，保留require表达式。

exclude和include来指定要忽略或包含的文件

rollup 中的配置如下

js 复制代码

export default {  
 // ...  
 plugins: [  
   commonjs({  
     transformMixedEsModules:true
     include: [/node_modules/, 'src/main/**'],
     extension: ['.ts','.js']
  }),
  nodeResolve()
]  
};

也可以看下typescript插件因为现在写项目大部分都是ts

在vite中,其实已经集成了以上两个插件,我们只需要改改配置即可
cn.vitejs.dev/config/buil...

js 复制代码

vite:{
    build:{
       commonjsoptions:{
         transformMixedEsModules:true
        include: [/node_modules/, 'src/main/**'],
        extension: ['.ts','.js']
       }
    }
}

此时已经完整处理了log4js依赖没有打进去的情况

除此之外 vite也默认集成了代码压缩插件tersero插件.. 使用方法可以看看 @rollup/plugin-terser

配置format-options

删除注释默认打包不会删除注释

代码优化-分包有时候打包结束控制台会打印一下

cmd 复制代码

(!) Some chunks are larger than 500 kB after minification.    Consider:  
 - Using dynamic import() to code-split the application  
 - Use build.rollupOptions.output.manualChunks to improve chunking:

说明我们的产物过大,需要拆分

output-manualchunks配置这里有时候需要考虑循环依赖的问题. 但循环依赖大部分都可以从代码设计上解决,

当然也可以调整阈值 Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

rollup-plugin-visualizer. 具体如何分包可以看看这个插件.

我的项目使用的是antd和echarts, 这两个包需要单独拆除

json 复制代码

 build: {
        chunkSizeWarningLimit:200,
        rollupOptions:{
            output:{
                manualChunks:{
                    antd:['antd'],
                    echarts:['echarts']
                }
            }
        }

    },

压缩报告 gzip 打包结束vite还会提示一份压缩报告 cn.vitejs.dev/config/buil...

我们也可以用 vite-plugin-compression 继续压缩也可以调整 terser minify

stackoverflow.com/questions/6...

环境变量的设置,参考官网即可

需要提醒的是.env环境变量应该写在vite配置文件中root目录下

env变量一般我们都是配置字符串,那么如何配置数组.布尔值呢.. ,百度即可

也可以使用 cross-env 设置...

环境变量ts提示设置, 但有的项目经常不好使 cn.vitejs.dev/guide/env-a...

vite中资源的引入 .. cn.vitejs.dev/guide/asset...

fav.icon设置 css bg 的设置

js 复制代码

import imagePath from '@/assets/logo.svg'
<template>
  <div class="logo" :style="{ backgroundImage: `url(${imagePath})` }"></div>
</template>

vite注入iifjs ,有些项目需要引入jquery

js CDN的处理分包之后, 第三方的产物如 react, antd可以用cdn替换,优化页面一般公司都会有自己的cdn. 如果是自己的项目, 可以用公开的cdn . 可以看看这个插件vite-plugin-cdn-import

图片cdn处理

项目build的时候 ,图片也需要替换为cdn, 写一个插件即可,思路如下

vite 的构建钩子 build:before 中将图片引用地址修改为 CDN 地址的功能。

在 beforeWrite.writeBundle 函数中，使用 glob 包获取构建后的文件列表，遍历文件列表，查找并替换所有引用的图片路径。

js 复制代码

import glob from 'glob'
import fs from 'fs'
export default {
  // ...
  build: {
    // ...
    beforeWrite: {
      writeBundle: async () => {
        // 定义 CDN 地址
        const cdnBaseUrl = 'https://cdn.example.com'
        // 获取构建后的文件列表
        const fileList = await glob.sync('./dist/**/*.{js,css,html}')
        // 遍历文件列表
        fileList.forEach((filePath) => {
          // 读取文件内容
          const fileContent = fs.readFileSync(filePath, 'utf-8')
          // 查找并替换所有引用的图片路径
          const newFileContent = fileContent.replace(/(\/images\/)/g, `${cdnBaseUrl}/images/`)
          // 写入修改后的文件内容
          fs.writeFileSync(filePath, newFileContent, 'utf-8')
        })
      },
    },
  },
};

转载自 blog.csdn.net/aexwx/artic.....

具体cdn的设计还是比较复杂,因为cdn的域名我们不可能只涉及一个,但思路都是一样的

babel的引入

babeljs.io/docs/babel-...

报错Could not find a declaration file for module '@babel/core'.

需要单独引入对应的ts文件 www.npmjs.com/package/@ty...

也可以在ts 中关闭 ,参考 skipLibCheck github.com/vitejs/vite...

还有一些常见的配置项
publicdir: 作为静态资源服务的文件夹。该目录中的文件在开发期间在 / 处提供，并在构建期间复制到 outDir 的根目录

build-emptyoutdir 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录

注意public和outDir不能位于src目录下

resolve-mainfields

resolve.conditions