vue3.0 pre-alpha之调试

时间 2019-11-08

标签 vue3.0 vue pre alpha 调试繁體版

原文原文链接

代码调试

生成sourceMaphtml

rollup.config.js文件中找到createConfig,在函数中添加一行output.sourcemap = truereact

并修改tsconfig.json中sourceMap为trueweb

运行yarn dev reactivity,能够看见在packages/reactive目录下生成了dist/reactivity.global.js文件，这个待会咱们调试须要引用到。json

在yarn dev以前，请确保已安装好其余依赖。数组

新建html文件(/examples/reactive.html)，引入上面生成的*.global.js文件。浏览器

<!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>reactive</title>
  </head>
  <body>
    <!--引入打包好的global.js文件-->
    <script src="reactivity/dist/reactivity.global.js"></script>
    <script>
      const counter = VueObserver.reactive({ num: 0, arr: [1, 2, 3] })
      VueObserver.effect(
        () => {
          console.log('observerd', counter.num)
          console.log('observerd', counter.arr)
        })
    </script>
  </body>
</html>

复制代码

浏览器打开html文件若是发现找不到文件的报错，这时你须要一个server。能够使用rollup-plugin-server-io插件启一个服务。bash

yarn add rollup-plugin-server-io -D
rollup.config.js中import serverIo from 'rollup-plugi-server-io'
找到createConfig中的plugins，增长server服务

import serverIo from 'rollup-plugin-server-io'
function createConfig(output, plugins = []) {
  // ...
  return {
    input: resolve(`src/index.ts`),
    // Global and Browser ESM builds inlines everything so that they can be
    // used alone.
    external: isGlobalBuild || isBrowserESMBuild ? [] : externals,
    plugins: [
      <!--找到plugins数组，添加以下代码-->
      serverIo({
        // 添加你本身根目录，能够有多个
        webroot: [
          path.join(__dirname, 'dist'),
          path.join(__dirname, '__test__'),
          path.join(__dirname, 'examples'),
          path.join(__dirname, 'packages')
        ],
      }),
      json({
        namedExports: false
      }),
      tsPlugin,
      aliasPlugin,
      createReplacePlugin(
        isProductionBuild,
        isBunlderESMBuild,
        (isGlobalBuild || isBrowserESMBuild) &&
          !packageOptions.enableNonBrowserBranches
      ),
      ...plugins
    ],
    output,
    onwarn: (msg, warn) => {
      if (!/Circular/.test(msg)) {
        warn(msg)
      }
    }
  }
}
复制代码

从新yarn dev reactivity,浏览器输入页面地址就能够访问啦，http://localhost:8000/reactive.html编辑器

接下来就能够愉快的调试源代码啦！！函数

若是你使用的是vscode编辑器, 能够省略上个步骤，装一个Live Server的插件post

找到html文件，右键=> open with live server

参考 juejin.im/post/5d99d9…