如何生成 sourcemap 调试 Vue3 源码

Build with Source Maps Use the --sourcemap or -s flag to build with source maps. Note this will make the build much slower.

生成sourcemap调试看源码-->贡献指南里有描述

下载源码安装依赖

$ git clone https://github.com/vuejs/vue-next.git
$ cd vue-next
$ pnpm install 或者 yarn install
复制代码

遇到问题：yarn install info No lockfile found

解决：

$ yarn install --ignore-scripts
复制代码

碰到跑单元测试好像有报错Cannot find module '@vue/shared/src'，用pnpm install就没有

生成 sourcemap

修改package.json:

{
    "version": "3.2.23",
    "scripts": {
        "dev:sourcemap": "node scripts/dev.js --sourcemap"
    }
}
复制代码

执行命令，生成sourcemap:

$ yarn dev:sourcemap
复制代码

控制台输出类似vue-next/packages/vue/src/index.ts → packages/vue/dist/vue.global.js的信息:

其中packages/vue/dist/vue.global.js.map 就是sourcemap文件

VSCode 调试源码

在 Vue3 官网找个例子，在 vue-next/examples/index.html。其内容引入packages/vue/dist/vue.global.js。

<div id="counter">
    counter:{{counter}}
</div>
<script src="../../packages/vue/dist/vue.global.js"></script>
<script>
    const Counter = {
        data() {
            return {
                counter: 0
            }
        }
    }

    Vue.createApp(Counter).mount('#counter')
</script>
复制代码

新建一个终端窗口，执行命令：

$ yarn serve
复制代码

浏览器打开http://localhost:5000/examples/，断点调试可跟踪源码执行过程，也可以用VSCode进行断点调试（插件：Debugger for Chrome）

延伸阅读：

• juejin.cn/post/699497…
• 绝了，没想到一个 source map 居然涉及到那么多知识盲区