宝安区做外贸网站的公司自己做网站能挣钱吗

当前位置： 首页 > news >正文

宝安区做外贸网站的公司,自己做网站能挣钱吗,wordpress图片分页插件下载,庆阳东道设计文章目录 一、背景二、结论三、vitejs/plugin-vue 插件调试前物料准备vuePlugin 入口buildStart 方法transform 方法 四、vue/compiler-sfc 核心包parse 方法compileScript、rewriteDefault 方法compileTemplate 方法 五、整体架构六、总结参考资料 一、背景 最近正在研究 rea… 文章目录 一、背景二、结论三、vitejs/plugin-vue 插件调试前物料准备vuePlugin 入口buildStart 方法transform 方法 四、vue/compiler-sfc 核心包parse 方法compileScript、rewriteDefault 方法compileTemplate 方法 五、整体架构六、总结参考资料 一、背景 最近正在研究 react jsx 转化为 js 的过程在学习完成之后突然想到既然 react 是用过 babel 完成 jsx 的转化那 vue 是不是也是使用 babel 的呢带着这些疑问我开始探索 vue 的编译过程经过一些资料的查询发现好像和 react 不太一样但是网上却很少有深入的文章因此我开始对源码的探索。 二、结论 vue 3 组件在编译过程中使用了 babel/parse 处理 script 中 js 代码处理为普通 js 代码其余解析均未使用;下面我们将从源码层面解读。 三、vitejs/plugin-vue 插件 调试前物料准备 vue 3 vitevscode 添加入口断点 找到入口文件 vite.config.js找到对应解析插件 vitejs/plugin-vue 插件 并在对应使用处打上断点在控制台打开 js 调试终端 调试方法和浏览器类似在对应终端启动我们的项目 vuePlugin 入口 进入 vue() 方法调用中会出现 vuePlugin 方法这个方法暴露了很多配置属性因为我们目的关注编译打包过程所以我们这次只需关系核心的 buildStart 和 transform 即可因此我们在这两个方法中打上断点 // src/index.ts function vuePlugin(rawOptions {}) {// xxxx 省略return {name: vite:vue,handleHotUpdate(ctx) {},config(config) {},configResolved(config) {},configureServer(server) {},// 开始打打包时处理的内容buildStart() {options.compiler options.compiler || resolveCompiler(options.root);},async resolveId(id) {},load(id, opt) {},// 转化代码时执行的内容transform(code, id, opt) {// xxxx 省略}}; }buildStart 方法 buildStart 方法主要是在服务启动前拿到编译的配置 接下来我们在 build 处打上断点看之后的流程在控制台输入 options 查看其中内容 此图可以看出最初 compiler 为空我们的代码执行了 resolveCompiler 方法并把结果存入了 options.compiler 中为了清楚该方法做了什么我们 step into 看一下这个方法的实现。 这个代码可以看出其实就是加载了并且返回了 vue/compiler-sfc 这个核心包那加载这个包是做什么呢我们可以接着往下看继续走下一个断点然后会发现我们项目启动了并没有走到下一个断点。 transform 方法 那么是什么时候怎么才能走到我们的 transform 中呢vite 的特点先启动再根据加载页面按需加载所需要编译的代码明白这一点之后我们只需要在浏览器访问这个地址我这里就是 http://localhost:3000/ 访问之后发现我们的断点进入到了 transform 中 从这边也可以看出 vite 打包为什么比 webpack 快 继续看 transform 里面的代码可以看到 return transformMain() 这个就是我们的核心转化方法我们继续 step into 该方法 接着我们看一下这个方法的入参 code 就是我们的源代码filename这个文件的路径options配置项pluginContext插件的上下文thisssr暂不考虑asCustomElement暂不考虑 然后我们其实核心要看的就是这个 code - 原生 js 的转化因此往下看这个 code 都在哪里使用首先我们就可以看到 createDescriptor 这个方法,这个时候我们打印一下descriptor 得到如下图
发现我们 code 被解析如下三个部分 template、styles、script。接着看这里的代码发现如下图 3 行代码 // 解析 descriptor 中的 script 部分 const { code: scriptCode, map } await genScriptCode(descriptor, options, pluginContext, ssr);// 解析 descriptor 中的 style 部分 const stylesCode await genStyleCode(descriptor, pluginContext, asCustomElement, attachedProps);// 解析 descriptor 中的 template 部分 const ({ code: templateCode, map: templateMap } await genTemplateCode(descriptor, options, pluginContext, ssr)); 然后在这里其实就比较清晰了createDescriptor 先对源代码进行了初步解析然后返回了 descriptor然后我们进入 genScriptCode、genStyleCode、genTemplateCode 这三个方法进行具体代码转化。 接下来我们看下这四个方法的具体实现只保留核心代码 // 得到原始的 descriptor function createDescriptor(filename, source, { root, isProduction, sourceMap, compiler }) {const { descriptor, errors } compiler.parse(source, {filename,sourceMap});return { descriptor, errors }; }// 处理 descriptor 中 script 部分 async function genScriptCode(descriptor, options, pluginContext, ssr) {// 只保留核心代码const script resolveScript(descriptor, options, ssr);scriptCode options.compiler.rewriteDefault(script.content, _sfc_main, xxx);return {code: scriptCode,map}; } // 处理 css async function genStyleCode(descriptor, pluginContext, asCustomElement, attachedProps) {// 没有使用 compiler } // 处理 template async function genTemplateCode(descriptor, options, pluginContext, ssr) {const template descriptor.template;if (!template.lang !template.src) {return transformTemplateInMain(template.content, descriptor, options, pluginContext, ssr);} }function transformTemplateInMain(code, descriptor, options, pluginContext, ssr) {const result compile(code, descriptor, options, pluginContext, ssr); }function compile(code, descriptor, options, pluginContext, ssr) {const result options.compiler.compileTemplate(spreadProps(spreadValues({}, resolveTemplateCompilerOptions(descriptor, options, ssr)), {source: code}));return result; }function resolveScript(descriptor, options, ssr) {resolved options.compiler.compileScript(descriptor, spreadProps(spreadValues({}, options.script), {// xxx}));return resolved; } genStyleCode 则处理为 import /Users/zcy/Desktop/毕设/smart-port/src/App.vue?vuetypestyleindex0lang.less 后续文章中会介绍为什么这个东西是怎么解析的本文不会过多讲解。 经过上面代码分析可以看出核心处理方法为 options.compiler.compileTemplate、 options.compiler.compileScript、 options.compiler.rewriteDefault、 options.compiler.parse此时再看 options.compiler 这个对象是不是很眼熟呢这个就是在 buildStart 中 获取到的 vue/compiler-sfc 核心包源码如下 options.compiler options.compiler || resolveCompiler(options.root);因此我们要看懂到底是怎么解析 vue 组件的就需要深入这个包中。 四、vue/compiler-sfc 核心包 parse 方法 我们在 options.compiler.parse 方法调用处打上断点然后我们逐层进入方法 我们进入到了 parse 方法这边可以看到有一个 ast 的转化如下图调用了 compiler.parse 方法,经过分析发现这个方法源于vue/compiler-dom 从这个包的依赖看出并没有使用 babel略过这个核心包因此得出结论 parse 方法中没有使用 babel。 compileScript、rewriteDefault 方法 继续刚才操作我们看 compileScript 方法 顺腾摸瓜找到 parser\(2 这个变量的源头 var parser\)2 require(babel/parser);rewriteDefault 也是如此 因此得出结论在 script 的解析中会使用 babel/parse。下面为解析后的源码 import { ref } from vue;const _sfc_main {setup(__props, { expose }) {expose();const state ref(1)const returned { state, ref } Object.defineProperty(returned, __isScriptSetup, { enumerable: false, value: true }) return returned } }compileTemplate 方法 同样使用了 vue/compiler-dom 进行转化具体转化细节就不进行详细展开了, 结果会转化为一个 render 函数如下 import { resolveComponent as _resolveComponent, createVNode as _createVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from vueconst _hoisted_1 { id: nav }function _sfc_render(_ctx, _cache, \(props, \)setup, \(data, \)options) {const _component_router_link _resolveComponent(router-link)const _component_router_view _resolveComponent(router-view)return (_openBlock(), _createElementBlock(_Fragment, null, [_createElementVNode(div, _hoisted_1, [_createVNode(_component_router_link, { to: /login }),_createVNode(_component_router_link, { to: / }),_createElementVNode(div, null, _toDisplayString($setup.state), 1 /* TEXT /)]),_createVNode(_component_router_view)], 64 / STABLE_FRAGMENT */)) }ƒ 五、整体架构 六、总结 本文只是出于好奇浅浅研究下了一下 vue3 的编译过程和其中涉及到 babel 使用的点对于很多细节没有深入研究因此只做了一个简单的分析希望对大家有参考价值。 参考资料 原来 vue3 文件编译是这样工作的看完后更懂vue3了