代码调试
生成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 -Drollup.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的插件
找到html文件，右键=> open with live server
