嚐鮮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文件

目錄