:RawSourceMap} generate 函数,接收两个参数,分别是经过转换器处理的 ast 抽象语法树,以及 options 代码生成选项。最终返回一个 CodegenResult 类型的对象。 可以看到 CodegenResult 中包含了 code 代码字符串、ast 抽象语法树、可选的 sourceMap、以及代码字符串的前置部分 preamble。 而generate 的函数,第一行就是生...
productionSourceMap: true, devServer: { port: 8084, https: false, hotOnly: false, // proxy: null, // 设置代理 proxy: false, before: app => { } }, configureWebpack: { resolve: { alias: { // 修改Vue倍导入时包的路径 "vue$": "vue/dist/vue.js" } }, //压缩js optimization: { ...
functiongenerateSourceMap (filename, source, generated) { // 生成sourcemap returnmap.toJSON() } parse.js其实也没有真正解析.vue文件的代码,只是包含一些热重载以及生成sourceMap的代码,最主要的还是调用了compiler.parseComponent 这个方法,但是compiler并不是vue-loader的方法,而是调用vue框架的parse,这个文件在vue...
importMagicStringfrom'magic-string';consts =newMagicString('problems = 99');// 替换 problems -> answers.overwrite(0, 8, 'answer') s.toString() // 'answer = 99'// 生成 sourcemapvarmap = s.generateMap({ source: 'source.js', file: 'converted.js.map', includeContent: true})复制代码 ...
rollupOptions,// 可以指定压缩工具terser, 需要安装后使用 npm i terser -Dminify:false,// 是否生成 sourcemap 文件,方便debugsourcemap:true,// css 代码分割cssCodeSplit:true,lib: {entry:"./src/entry.ts",name:"GresgyingUI",fileName:"gresgying-ui",// 输出常用的三种模块类型formats: ["esm","...
(code,transformer,s,ctx,sfcPath)// 追加一个注释内容:'/* unplugin-vue-components disabled */'s.prepend(DISABLE_COMMENT)// 将处理完后的魔术字符串重新转换成普通字符串constresult:TransformResult={code:s.toString()}if(ctx.sourcemap)result.map=s.generateMap({source:id,includeContent:true})return...
// 生成 sourcemap var map = s.generateMap({ source: 'source.js', file: 'converted.js.map', includeContent: true }) 8. fs-extra fs-extra是一个强大的文件操作库, 是Nodejs fs 模块的增强版; 这个就不多讲了,因为它在千锤百炼之下只能形容它是YYDS,查看更多官方文档。
通过CodegenResult 的接口声明能清晰的看到返回结果中存在 code 代码字符串、处理后的 AST 抽象语法树,以及 sourceMap。 看上方源码的第 12 行,判断 template 模板是否为字符串,如果是的话则会对字符串进行解析,否则直接将 template 作为 AST 。其实我们平时在写的单文件 vue 代码,都是以字符串的形式传递进去的。
generate根据优化后的 AST,生成可执行代码,例如_c、_l之类的。 而在「Vue3」中,整体的Compile过程仍然是三个阶段,但是不同于「Vue2.x」的是,第二个阶段换成了正常编译器都会存在的阶段transform。所以,它看起来会是这样: 在源码中,它对应的伪代码会是这样: ...
sourceMap: options.sourceMap } } // 增加代码,px转rem配置(需要将px2remloader添加进loaders数组中) const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 192, //根据视觉稿,rem为px的十分之一,1920px 192 rem // remPrecision: 8//换算的rem保留几位小数点 ...