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編輯器