本文中的vue版本为vue2

背景

有sourcemap的vue umd版本可以很好的用来学习vue的源码，本文介绍了自定义打包vue源码并生成sourcemap的方法

实战

准备工作

开始

下载vue源码一份，安装依赖

分析

打包的代码逻辑在script/build.js和script/config.js里面，通读这两个文件可以知道以下信息

vue源码使用rollup进行打包，打包的产物有22种，我们需要的的产物是umd格式下的vue.min.js文件，也就是web-full-prod的配置
vue源码使用rollup-plugin-flow-no-whitespace和rollup-plugin-buble进行代码转换，其中rollup-plugin-flow-no-whitespace是将代码中的flow的type给去掉，rollup-plugin-buble将代码从es6转换为es5的语法。
rollup-plugin-flow-no-whitespace插件并不会有sourcemap生成，这样最后的结果无论如何都不可能有sourcemap输出。

解决方法

vue源码是通过rollup进行打包的，在rollup的插件里面转换代码最常用的插件是rollup-plugin-babel(或者@rollup/plugin-babe;),我们可以通过rollup-plugin-babel替换掉上面两个插件，同时因为babel对sourcemap有很好的支持，我们可以从rollup-plugin-babel中得到需要的sourcemap

实操

将打包后的目标删除只剩vue.min.js

2. 安装rollup-plugin-babel以及@babel/preset-flow，引入rollup-plugin-babel删除rollup-plugin-flow-no-whitespace和rollup-plugin-buble，修改babel的配置为presets: ['@babel/flow'] 3. 打开rollup的sourcemap设置让插件输出sourcemap

断点到写入输出的地方，运行yarn build

可以看到有sourcemap对象输出了，这个对象得我们自己写入到.map文件里面

.then(({ output: [{ code, map }] }) => {
      return Promise.all([ write(file, `${code}\n//# sourceMappingURL=${filename}.map`), write(`${file}.map`, JSON.stringify(map))])

这个时候运行yarn build，生成的产物中就会有sourcemap文件了

验证

可以在sourcemap映射的源码中进行断点，验证成功（这里用的是上传到cdn的文件）

后记

打包生产环境是为了跳过开发环境下的逻辑更熟悉线上的逻辑
打包后的文件已经上传到cdn，直接通过cdn引入方便快捷
本次打包基于commit 529016bca92f6f098e903b1f77c70d3b0dadefaa
react17源码的sourcemap打包请看生成react源码sourcemap
作者xiaochuan

生成vue2源码sourcemap

背景

实战

准备工作

开始

分析

解决方法

实操

验证

后记