Webpack和Vite插件的开发与利用

在现代开发中一样平常各公司都有自己的监控平台，对前端而言如果欣赏器报错的话就可以通过埋点收集错误日记，再结合sourcemap文件可以帮助我们定位到错误代码，帮助我们排查题目。这里就记录一下之前在webpack和vite两个环境中的插件开发，可以在生产构建时将sourcemap上传到内部的文件服务器配合后续的监控日记来一起利用
Webpack插件开发

Compiler 和 Compilation

在插件开发中有两个概念比力重要，分别是Compiler和Compilation，他们是Plugin和Webpack之间的桥梁。他们的含义如下：

• Compiler对象包含了Webpack环境所有的配置信息，包含options、loaders、plugins等这些所有的信息，这个对象在Webpack启动的时候被实例化，是全局唯一的，可以把他看成是Webpack的实例
  
• Compilation 对象包含了当前模块资源以及编译生成资源尚有变化的文件等相干信息。在webpack以开发模式运行时，每当检测到一个文件变化，一个新的Compilation就会被创建。Compilation对象提供了很多变乱回调给插件做扩展，通过Compilation也能读取到Compiler对象
  

两者的区别在于：Compiler代表了整个Webpack从启动到关闭的生命周期，而Compilation只是代表了一次新的编译。
变乱流

Webpack 就像一条生产线，要颠末一系列处置惩罚流程后才能将源文件转换成输出结果。 这条生产线上的每个处置惩罚流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处置惩罚后才能交给下一个流程去处置惩罚。 插件就像是一个插入到生产线中的一个功能，在特定的机遇对生产线上的资源做处置惩罚。
Webpack 通过 Tapable 来组织这条复杂的生产线。 Webpack 在运行过程中会广播变乱，插件只必要监听它所关心的变乱，就能参加到这条生产线中，去改变生产线的运作。 Webpack 的变乱流机制包管了插件的有序性，使得整个系统扩展性很好。
Webpack 的变乱流机制应用了观察者模式，和 Node.js 中的 EventEmitter 非常相似。 Compiler 和 Compilation 都继承自 Tapable，可以直接在 Compiler 和 Compilation 对象上广播和监听变乱。
webpack 插件钩子

每个webpack插件都是一个class,此中最终要的两个内容，一个是constructor，可以担当一个option参数，这个就是用户在利用这个插件时传入的参数，第二个就是apply方法，担当一个compiler这个实例，在webpack初始化时，会调用每个插件，执行此中的apply方法，我们就可以在apply这个方法中利用担当到的Compiler实例上提供的各种hook来监听我们必要的变乱，在整个流水线工程中有很多变乱钩子，如下图所示：

我们可以监听我们必要的机遇，参考地点Webpack插件钩子
在这里我们必要在webpack打包结束的时候将构建结果中的.map文件上传到自己的文件服务器，所以必要订阅done这个变乱钩子，在每次compilation完成时执行。
插件调用方式

在webpack插件中一共有同步和异步两种调用方式，同步调用是直接利用tap异步调用利用tapAsync尚有一种是tapPromise，简单代码展示如下：

1. apply(compiler) {
2.   // 同步钩子
3.   compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
4.     // 同步处理
5.     console.log('同步处理');
6.   });
7. }

复制代码

1. apply(compiler) {
2.   // 异步钩子，使用回调函数
3.   compiler.hooks.done.tapAsync('MyPlugin', (stats, callback) => {
4.     // 异步处理
5.     setTimeout(() => {
6.       console.log('异步处理完成');
7.       callback();
8.     }, 1000);
9.   });
10. }

复制代码

1. apply(compiler) {
2.   // 异步钩子，返回 Promise
3.   compiler.hooks.done.tapPromise('MyPlugin', (stats) => {
4.     return new Promise((resolve) => {
5.       setTimeout(() => {
6.         console.log('Promise 异步处理完成');
7.         resolve();
8.       }, 1000);
9.     });
10.   });
11. }

复制代码

这里我们必要将文件上传，所以明显是一个异步的调用，采用的是tapAsync的调用方式，详细代码如下：

1. const fs = require('fs');
2. const path = require('path');
3. const axios = require('axios');
4. const FormData = require('form-data');
6. // 将打包文件中的.map文件上传到指定服务器
7. class UploadSourceMapPlugin {
8.   constructor(options) {
9.     this.options = options;
10.     if (!this.options.uploadUrl) {
11.       throw new Error('uploadUrl is required');
12.     }
13.   }
15.   apply(compiler) {
16.     compiler.hooks.done.tapAsync('UploadSourceMapPlugin', async (stats, callback) => {
17.       try {
18.         const outputPath = compiler.options.output.path;
19.         
20.         // 递归读取目录中的所有文件
21.         function getAllFiles(dir) {
22.           const files = fs.readdirSync(dir);
23.           let fileList = [];
24.          
25.           files.forEach(file => {
26.             const filePath = path.join(dir, file);
27.             const stat = fs.statSync(filePath);
28.             
29.             if (stat.isDirectory()) {
30.               fileList = fileList.concat(getAllFiles(filePath));
31.             } else {
32.               fileList.push(filePath);
33.             }
34.           });
35.          
36.           return fileList;
37.         }
38.         
39.         // 获取所有文件
40.         const allFiles = getAllFiles(outputPath);
41.         
42.         // 过滤出 .map 文件
43.         const sourceMapFiles = allFiles
44.           .filter(file => file.endsWith('.map'))
45.           .map(file => ({
46.             name: path.basename(file),
47.             path: file
48.           }));
49.         
50.         // 上传所有的 source map 文件
51.         for (const file of sourceMapFiles) {
52.           const filePath = file.path;
53.          
54.           if (fs.existsSync(filePath)) {
55.             await this.uploadFile(filePath, file.name);
56.             
57.             // 如果配置了上传后删除
58.             if (this.options.deleteAfterUpload) {
59.               fs.unlinkSync(filePath);
60.               console.log(`Deleted ${file.name} after upload`);
61.             }
62.           }
63.         }
64.         // 通知 webpack 异步操作已完成
65.         // webpack 可以继续执行后续步骤
66.         // 如果不调用 callback，webpack 的构建过程会一直等待
67.         callback();
68.       } catch (error) {
69.         console.error('Error in UploadSourceMapPlugin:', error);
70.         callback();
71.       }
72.     });
73.   }
75.   async uploadFile(filePath, fileName) {
76.     try {
77.       const formData = new FormData();
78.       formData.append('sourcemap', fs.createReadStream(filePath), fileName);
79.       
80.       const response = await axios.post(this.options.uploadUrl, formData, {
81.         headers: {
82.           ...formData.getHeaders(),
83.           'Authorization': this.options.token || ''  // 可选的认证token
84.         }
85.       });
86.       
87.       console.log(`Successfully uploaded ${fileName}`);
88.       return response.data;
89.     } catch (error) {
90.       console.error(`Failed to upload ${fileName}:`, error.message);
91.       throw error;
92.     }
93.   }
95. }
97. module.exports = UploadSourceMapPlugin;

复制代码

这里有个小小的坑，就是在compiler中有个state对象也是文件列表，但是这内里只能获取到颠末Webpack编译之后的文件，所以最保险的还是自己递归遍历一下结果文件进行过滤。这里callback是上传结束之后的回调，告诉webpack已近完成，否则webpack就会一直在这里等待
利用

最终利用这个插件也很简单，我们一样平常主必要再生产环境利用，开发环境一样平常是没有须要将sourcemap上传上去的。通过下面的配置就可以利用我们开发的插件了

1. // 只在生产环境使用
2.     ...(process.env.NODE_ENV === 'production' ? [
3.       new UploadSourceMapPlugin({
4.         uploadUrl: 'https://file-server.com/upload',
5.         token: 'auth-token',  // 可选的认证token
6.         deleteAfterUpload: true    // 是否在上传后删除本地文件
7.       })
8.     ] : []),

复制代码

Vite

Vite 是一个现代的前端构建工具，因其快速、简单的配置和优化的开发体验而广受欢迎。Vite是基于Rollup来的，速度非常快，如果开发的插件不带Vite特有的钩子一样平常都可以在Rollup中兼容利用。
Vite中的每个插件一样平常都是一个返回一个对象的函数，此中有name字段表插件名称，以及对应的钩子函数，在Vite中有通用钩子和Vite专属钩子。

参考地点：Vite插件钩子
这里我们在每次生产环境构建结束时调用这个插件。我们可以用apply: ‘build’, 表现只在构建时调用这个插件，日常开始npm run dev时处于开发状态就不会调用这个插件。
详细代码如下：

1. import fs from 'fs'
2. import path from 'path'
4. export default function UploadSourceMapPlugin(options = {}) {
5.   const {
6.     uploadUrl = '',    // 上传服务器地址
7.     headers = {},      // 自定义请求头
8.     deleteAfterUpload = true  // 上传后是否删除本地map文件
9.   } = options
11.   if (!uploadUrl) {
12.     throw new Error('uploadUrl is required for UploadSourceMapPlugin')
13.   }
15.   return {
16.     name: 'vite-plugin-upload-sourcemap',
17.     apply: 'build',    // 仅在构建时应用
18.    
19.     async closeBundle() {
20.       const distDir = path.resolve('dist')
21.       const sourcemaps = []
23.       // 递归查找所有.map文件
24.       function findSourceMaps(dir) {
25.         const files = fs.readdirSync(dir)
26.         
27.         files.forEach(file => {
28.           const fullPath = path.join(dir, file)
29.           const stat = fs.statSync(fullPath)
30.          
31.           if (stat.isDirectory()) {
32.             findSourceMaps(fullPath)
33.           } else if (file.endsWith('.map')) {
34.             sourcemaps.push(fullPath)
35.           }
36.         })
37.       }
39.       findSourceMaps(distDir)
41.       // 上传所有sourcemap文件
42.       for (const mapFile of sourcemaps) {
43.         const formData = new FormData()
44.         formData.append('file', fs.createReadStream(mapFile))
45.         
46.         try {
47.           const response = await fetch(uploadUrl, {
48.             method: 'POST',
49.             body: formData,
50.             headers: {
51.               ...headers
52.             }
53.           })
55.           if (!response.ok) {
56.             throw new Error(`Upload failed for ${mapFile}`)
57.           }
59.           console.log(`Successfully uploaded: ${mapFile}`)
61.           // 如果配置了上传后删除，则删除本地map文件
62.           if (deleteAfterUpload) {
63.             fs.unlinkSync(mapFile)
64.             console.log(`Deleted local file: ${mapFile}`)
65.           }
66.         } catch (error) {
67.           console.error(`Error uploading ${mapFile}:`, error)
68.         }
69.       }
70.     }
71.   }
72. }

复制代码

此中的代码逻辑实在和webpack中基本保持一致。至此我们就开发了一个上传soucemap的两套插件可以分别在Webpack和Rollup中利用了。
参考文件

Webpack插件钩子
Vite插件钩子
Vite插件开发

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。