尝鲜Vue3之一：浏览器中如何断点调试Vue3 源码

时间 2019-11-08

原文原文链接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../packages/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id='app'></div>
    <script> const App = { template: ` <button @click='click'>{{message}}</button> `, data() { return { message: 'Hello Vue 3!!' } }, methods: { click() { console.log('click ....', this.message) this.message = this.message.split('').reverse().join('') } } } let vm = Vue.createApp().mount(App, '#app') // console.log(vm) </script>
</body>

</html>
复制代码

其实这个代码就是vue2官网的代码拿过来能够正常运行咱们再试验一下vue3的composition apinode

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../packages/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
    <script> const { createApp, reactive, computed, effect } = Vue const MyComponent = { template: ` <button @click="click"> {{ state.message }} </button> `, setup() { const state = reactive({ message:'Hello Vue 3!!' }) effect(() => { console.log('state change ', state.message) }) function click() { state.message = state.message.split('').reverse().join('') } return { state, click } } } createApp().mount(MyComponent, '#app') </script>
</body>

</html>
复制代码

直接经过浏览器就能够打开本地文件react

能够试一下点击的效果接下来若是你要debug一下源码的时候你会发现代码是通过打包的没法直接在源码上打断点调试git

添加SourceMap文件

为了能在浏览器中看到源码并可以断点调试须要再打包后代码中添加sourcemapgithub

rollup.config.js

// rollup.config.js line:104左右
output.sourcemap = true 
复制代码

在tsconfig.json中配置sourcemap输出

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist",
    "sourceMap": true,  // ----------这里这里---------
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "allowJs": false,
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "removeComments": false,
    "jsx": "react",
    "lib": ["esnext", "dom"],
    "types": ["jest", "node"],
    "rootDir": ".",
    "paths": {
      "@vue/shared": ["packages/shared/src"],
      "@vue/runtime-core": ["packages/runtime-core/src"],
      "@vue/runtime-dom": ["packages/runtime-dom/src"],
      "@vue/runtime-test": ["packages/runtime-test/src"],
      "@vue/reactivity": ["packages/reactivity/src"],
      "@vue/compiler-core": ["packages/compiler-core/src"],
      "@vue/compiler-dom": ["packages/compiler-dom/src"],
      "@vue/server-renderer": ["packages/server-renderer/src"],
      "@vue/template-explorer": ["packages/template-explorer/src"]
    }
  },
  "include": [
    "packages/global.d.ts",
    "packages/runtime-dom/jsx.d.ts",
    "packages/*/src",
    "packages/*/__tests__"
  ]
}

复制代码

再次运行json

yarn dev
复制代码

好了同窗们能够快乐的玩耍了。api

不过要想真正了解源码须要不少基础知识的储备譬如 ES6的proxy reflect、monorepo风格代码组织方式后续文章中会一一解析3

尝鲜Vue3之一：浏览器中如何断点调试Vue3 源码

目录

克隆Vue3源码

安装依赖编译源码

测试API

添加SourceMap文件

目录