vue3.0 pre-alpha之调试

代码调试

生成sourceMap

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

并修改tsconfig.json中sourceMap为true

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

在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插件启一个服务。

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