13518219792
这篇文章给大家介绍Vue3.x源码调试的实现，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
如何调试vue3.x的ts源码
官网说使用 yarn dev 命令就可以对其进行调试，可是运行该命令后，是生成过后的代码，不能对其编写的ts源码进行调试。
其实再生成对应的sourcemap文件，便可以原汁原味的调试。
先看下几个截图：
如果这是你想要的调试效果，下面请看下如何生成sourcemap文件。
生成sourcemap文件
rollup.js中文文档
// rollup.config.js
export default {
// 核心选项
input, // 必须
external,
plugins,
// 额外选项
onwarn,
// danger zone
acorn,
context,
moduleContext,
legacy
output: { // 必须 (如果要输出多个，可以是一个数组)
// 核心选项
file, // 必须
format, // 必须
name,
globals,
// 额外选项
paths,
banner,
footer,
intro,
outro,
sourcemap,
sourcemapFile,
interop,
// 高危选项
exports,
amd,
indent
strict
},
};可以看到output对象有个sourcemap属性，其实只要配置上这个就能生成sourcemap文件了。 在vue-next项目中的rollup.config.js文件中，找到createConfig函数
function createConfig(output, plugins = []) {
const isProductionBuild =
process.env.__DEV__ === 'false' || /\.prod\.js$/.test(output.file)
const isGlobalBuild = /\.global(\.prod)?\.js$/.test(output.file)
const isBunlderESMBuild = /\.esm\.js$/.test(output.file)
const isBrowserESMBuild = /esm-browser(\.prod)?\.js$/.test(output.file)
if (isGlobalBuild) {
output.name = packageOptions.name
}
const shouldEmitDeclarations =
process.env.TYPES != null &&
process.env.NODE_ENV === 'production' &&
!hasTSChecked
const tsPlugin = ts({
check: process.env.NODE_ENV === 'production' && !hasTSChecked,
tsconfig: path.resolve(__dirname, 'tsconfig.json'),
cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
tsconfigOverride: {
compilerOptions: {
declaration: shouldEmitDeclarations,
declarationMap: shouldEmitDeclarations
},
exclude: ['**/__tests__']
}
})
// we only need to check TS and generate declarations once for each build.
// it also seems to run into weird issues when checking multiple times
// during a single build.
hasTSChecked = true
const externals = Object.keys(aliasOptions).filter(p => p !== '@vue/shared')
output.sourcemap = true // 这句话是新增的
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: [
json({
namedExports: false
}),
tsPlugin,
aliasPlugin,
createReplacePlugin(
isProductionBuild,
isBunlderESMBuild,
isGlobalBuild || isBrowserESMBuild
),
...plugins
],
output,
onwarn: (msg, warn) => {
if (!/Circular/.test(msg)) {
warn(msg)
}
}
}
}关于Vue3.x源码调试的实现就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
