vue cli源码学习之cli-plugin-vuex

vue cli源码学习之cli-plugin-vuex

jscodeshift库简介

jscodeshift 是一个用于代码转换的工具,特别适用于 JavaScript 和 TypeScript 代码。它基于 Recast 和 AST(抽象语法树)来解析、遍历和修改代码。jscodeshift 提供了一种编程方式来批量修改代码,常用于代码重构、升级库版本、自动化代码修复等场景。

jscodeshift 的主要功能

  1. 解析代码:将源代码解析为 AST,便于程序化地分析和修改代码结构。
  2. 遍历和查找:提供强大的 API 来遍历 AST,并查找特定的节点(如函数调用、变量声明等)。
  3. 修改代码:允许对 AST 进行修改,添加、删除或替换节点。
  4. 生成代码:将修改后的 AST 转换回代码字符串。

使用 jscodeshift

首先,你需要全局安装 jscodeshift:

npm install -g jscodeshift

创建转换脚本
编写一个 JavaScript 文件作为转换脚本。例如,以下是一个简单的转换脚本示例:

module.exports = (fileInfo, api) => {const j = api.jscodeshift;const root = j(fileInfo.source);// 查找所有的函数声明root.find(j.FunctionDeclaration).forEach(path => {// 在这里对每个函数声明进行操作console.log(path.node.id.name);});return root.toSource();
};

运行转换
使用 jscodeshift 命令行工具运行转换脚本:

jscodeshift -t path/to/transform.js path/to/your/code

-t 指定转换脚本的路径。 path/to/your/code 是你想要转换的代码文件或目录。

常用 API

  • find:查找特定类型的节点。
  • replaceWith:替换找到的节点。
  • forEach:遍历找到的节点。
  • toSource:将 AST 转换回代码字符串。

generator\injectUseStore.js

使用 jscodeshift 库对 JavaScript 文件进行代码转换。具体来说,它查找并修改所有的 createApp 调用,向其添加 use(store) 方法调用。以下是代码的详细解释:
1. 导入和初始化:
j 是 jscodeshift 的一个实例,用于解析和转换代码。
root 是代码的根节点,表示整个代码文件的抽象语法树(AST)。

2. 查找 createApp 调用:
使用 root.find(j.CallExpression, …) 查找所有的函数调用表达式。
检查这些调用是否是 createApp 函数或 Vue.createApp 方法。

3. 替换 createApp 调用:
使用 appRoots.replaceWith 方法,将找到的 createApp 调用替换为调用 use(store)。
具体实现是将 createApp 调用节点转换为一个新的调用表达式,添加 use 方法和 store 参数。

4. 返回修改后的代码:
使用 root.toSource() 将修改后的 AST 转换回代码字符串并返回。
这段代码的主要目的是在 Vue 项目中自动为 createApp 调用添加 use(store),以便在应用中使用 Vuex 状态管理。

module.exports = (file, api) => {const j = api.jscodeshiftconst root = j(file.source)// 查找所有的 createApp 调用const appRoots = root.find(j.CallExpression, (node) => {// 检查是否是 createApp 函数调用if (j.Identifier.check(node.callee) && node.callee.name === 'createApp') {return true}// 检查是否是 Vue.createApp 方法调用if (j.MemberExpression.check(node.callee) &&j.Identifier.check(node.callee.object) &&node.callee.object.name === 'Vue' &&j.Identifier.check(node.callee.property) &&node.callee.property.name === 'createApp') {return true}})// 替换 createApp 调用,添加 use(store)appRoots.replaceWith(({ node: createAppCall }) => {return j.callExpression(j.memberExpression(createAppCall, j.identifier('use')),[j.identifier('store')])})// 返回修改后的代码return root.toSource()
}

在 jscodeshift 中,j.identifier 是一个用于创建或匹配标识符(Identifier)节点的函数。标识符是编程语言中用于命名变量、函数、类等的名称。在 JavaScript 中,标识符可以是任何有效的变量名或函数名。

j.identifier 的作用

  • 创建标识符节点:当你需要在 AST 中插入一个新的标识符时,可以使用 j.identifier 来创建这个节点。例如,如果你想创建一个名为
    myVariable 的标识符节点,可以这样做:
  const myIdentifier = j.identifier('myVariable');

匹配标识符节点:在查找或遍历 AST 时,你可以使用 j.Identifier.check(node) 来检查某个节点是否是标识符节点。

generator\template-vue3\src\store\index.js

import { createStore } from 'vuex'export default createStore({state: {},getters: {},mutations: {},actions: {},modules: {}
})

这个代码是一个使用 Vuex 创建的 Vue 3 状态管理存储(store)的基本模板。Vuex 是 Vue.js 的一个状态管理模式和库,通常用于管理应用程序的全局状态。
以下是代码的主要部分及其作用:

  • import { createStore } from ‘vuex’: 从 Vuex 库中导入 createStore函数,用于创建一个新的 Vuex 存储实例。
  • export default createStore({ … }): 创建并导出一个Vuex 存储实例。

这个实例包含以下几个部分:

  • state: 用于存储应用程序的状态数据
  • getters:用于从状态中派生出一些状态数据
  • mutations: 用于定义更改状态的同步方法
  • actions:用于定义可以包含异步操作的函数,这些函数最终会提交 mutation 来改变状态。
  • modules: 用于将存储分割成更小的模块

这个模板是一个起始点,开发者可以根据应用的需求来填充和扩展这些部分。

generator\index.js

module.exports = (api, options = {}, rootOptions = {}) => {// 向入口文件中注入 store 的导入语句api.injectImports(api.entryFile, `import store from './store'`)if (rootOptions.vueVersion === '3') {// 如果 Vue 版本是 3,转换脚本并扩展包依赖api.transformScript(api.entryFile, require('./injectUseStore'))api.extendPackage({dependencies: {vuex: '^4.0.0' // 使用 Vuex 4.0.0 版本}})// 渲染 Vue 3 的模板api.render('./template-vue3', {})} else {// 向根选项中注入 storeapi.injectRootOptions(api.entryFile, `store`)api.extendPackage({dependencies: {vuex: '^3.6.2' // 使用 Vuex 3.6.2 版本}})// 渲染 Vue 2 的模板api.render('./template', {})}if (api.invoking && api.hasPlugin('typescript')) {// 如果正在调用并且有 TypeScript 插件,转换文件/* eslint-disable-next-line node/no-extraneous-require */const convertFiles = require('@vue/cli-plugin-typescript/generator/convert')convertFiles(api)}
}

这段代码是一个用于 Vue CLI 插件的生成器模块,专门用于配置 Vuex(Vue 的状态管理库)。它根据项目的 Vue 版本和是否使用 TypeScript 插件来调整项目的配置。以下是代码的主要功能:

  1. 注入导入语句:
    向项目的入口文件中注入 import store from ‘./store’,以便在项目中使用 Vuex 的 store。

  2. 根据 Vue 版本进行配置:
    如果 rootOptions.vueVersion 是 ‘3’,则:
    转换入口文件的脚本以适应 Vue 3 的使用方式。
    扩展项目的 package.json,添加 Vuex 4.0.0 版本的依赖。
    渲染适用于 Vue 3 的模板。
    否则(即 Vue 版本为 2),则:
    向根选项中注入 store。
    扩展项目的 package.json,添加 Vuex 3.6.2 版本的依赖。
    渲染适用于 Vue 2 的模板。

3.TypeScript 支持:
如果正在调用生成器并且项目中有 TypeScript 插件,则调用 TypeScript 转换文件的功能,以确保 TypeScript 文件的正确配置。
这段代码的目的是在使用 Vue CLI 创建项目时,自动配置 Vuex 和相关的依赖项,以便开发者可以更方便地使用 Vuex 进行状态管理。

api.extendPackage 方法是 Vue CLI 插件 API 提供的一个功能,用于扩展或修改项目的 package.json 文件。通过这个方法,你可以在插件生成器中动态地添加、修改或删除项目的依赖、脚本、配置等。

添加依赖:可以向项目中添加新的依赖项或开发依赖项。
修改脚本:可以添加或修改 npm 脚本。
配置字段:可以添加或修改 package.json 中的其他字段,如 browserslist、eslintConfig 等。
使用示例

api.extendPackage({dependencies: {vuex: '^4.0.0'},devDependencies: {'eslint-plugin-vue': '^7.0.0'},scripts: {serve: 'vue-cli-service serve',build: 'vue-cli-service build'}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/8302.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【考研数学 - 数二题型】考研数学必吃榜(数二)

数学二 suhan, 2024.10 文章目录 数学二一、函数❗1.极限1.1求常见极限1.2求数列极限1.2.1 n项和数列极限1.2.2 n项连乘数列极限1.2.3 递推关系定义的数列极限 1.3确定极限式中的参数1.4无穷小量阶的比较 2.连续2.1判断是否连续,不连续则判断间断点类型2.2证明题 二…

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 (二)

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 (二) 一、前言 目前鸿蒙应用的实现逻辑,基本都是参考和移植Android端来实现。针对BLE低功耗蓝牙来说,在鸿蒙化的实现过程中。我们发现了,鸿蒙独有的优秀点&#xff0c…

基于STM32的数字温度计教学

引言 数字温度计是许多电子项目中的常见应用,它可以实时监测周围环境的温度并显示。利用STM32微控制器实现数字温度计,可以帮助我们了解如何使用传感器进行模拟信号转换及数据传输。本教程将指导您使用STM32和DS18B20数字温度传感器实现一个简单的数字温…

go mod 依赖管理

什么是go mod go mod 是从 Go 1.11 版本开始引入的。Go Modules 是 Go 语言官方提供的一个版本管理工具,旨在解决依赖管理和版本控制的问题。从 Go 1.11 开始,Go Modules 被作为实验性功能引入,到了 Go 1.13 版本,Go Modules 成为…

洛谷解题日记||基础篇2

题目链接 0 剪刀&#xff0c;1 石头&#xff0c;2 布&#xff0c;3 蜥蜴人&#xff0c;4 斯波克我们可以根据题意&#xff0c;构建一个二维矩阵 result[5][5] 来表示每一种出拳的胜负情况。 #include <iostream> #include <vector> using namespace std;int m…

年会必备的抽奖小程序!

感觉一年一度的年会快来了&#xff0c;准备个小的抽奖小程序蛮陶冶情操的&#xff01; 正好今天有空整了一个&#xff0c;简单&#xff0c;简洁&#xff01;&#xff0c;大家也可以玩起来&#xff01; 技术栈&#xff1a; Flask 试玩的链接在这里,有意思的话也可以部署到自己的…

sqoop Oracle 导入到hive 日期时间消失

sqoop脚本&#xff1a; sqoop import -D mapred.job.queue.namehighway \ -D mapreduce.map.memory.mb4096 \ -D mapreduce.map.java.opts-Xmx3072m \ --connect "jdbc:oracle:thin://localhost:61521/LZY2" \ --username LZSHARE \ --password 123456 \ --query &q…

20241108通过iperf3确认中科创达的高通CM6125的WIFI的网速【失败】

20241108通过iperf3确认中科创达的高通CM6125的WIFI的网速【失败】 2024/11/8 15:43 由于以太网不能用&#xff0c;那就测试一下WIFI&#xff0c;iperf3链接/测试异常。 一般认为可能的原因有&#xff1a; 1、CM6125开发板的WIFI不带天线&#xff0c;影响性能。 2、CM6125的And…

Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法

情况说明 点击按钮后出现以下情况&#xff0c;浏览器屏幕变暗&#xff0c;再次点击则恢复正常。 解决方法&#xff1a; 找到你的全局样式文件&#xff0c;我的是gloable.css&#xff0c;添加以下代码&#xff1a; .v-modal {display: none; }重启服务器即可解决。

05栈和队列/代码随想录

六、栈和队列 6.1数据结构的应用 用栈实现队列 力扣232 很简单&#xff0c;添加的时候正常加在弹入栈&#xff0c;删除的时候把元素放到弹出栈&#xff0c;直接调用java集合实现的Stack class MyQueue {Stack<Integer> stackIn;Stack<Integer> stackout;public M…

51c大模型~合集18

我自己的原文哦~ https://blog.51cto.com/whaosoft/11621494 #SpatialBot 空间大模型&#xff1a;上交、斯坦福、智源、北大、牛津、东大联合推出&#xff01; 大模型走向空间智能、具身智能之路&#xff01; 智源&#xff0c;斯坦福&#xff0c;北大&#xff0c;牛津&…

国外白帽故事 | 攻破大学数据库系统,暴露数千学生记录

引言 在这篇文章中&#xff0c;我将分享我是如何攻破一个大型大学解决方案门户服务器的&#xff0c;这个服务器服务于许多大学客户&#xff0c;并且涉及数千名学生的数据。 目标 这是一个由印度许多大学和学院使用的门户网站&#xff0c;用于管理学生记录、成绩单、出勤记录…

苍穹外卖05-Redis相关知识点

目录 什么是Redis&#xff1f; redis中的一些常用指令 value的5种常用数据类型 各种数据类型的特点 Redis中数据操作的常用命令 字符串类型常用命令&#xff1a; 哈希类型常用命令 列表操作命令 集合操作命令 有序集合操作命令 通用命令 在java中操作Redis 环境…

【MySQL】数据的增删查改

文章目录 1. 插入数据(Create)1.1 全列插入1.2 指定列插入1.3 多行数据插入1.4 插入否则更新1.5 替换 2. 读取数据(Retrieve)2.1 select列2.2 where条件2.3 结果排序2.4 筛选分页结果 3. 修改数据(Update)4. 删除数据(delete)4.1 删除数据4.2 截断表 5. 插入查询的结果6. 分组与…

【案例分享】借助 iSpring,创造客户真正欣赏的专业在线培训体验

Safety Bee Training是一家领先的认证在线学习提供商&#xff0c;专门提供职业健康、安全和环境项目。它也是中东和亚洲唯一一家提供经 NASP 等国际认证机构认可的课程的培训提供商。它已经培训了超过 28,000 名学习者&#xff0c;并且正在不断扩大其课程范围&#xff0c;以提供…

【连续多届检索,ACM出版】第四届大数据、人工智能与风险管理国际学术会议 (ICBAR 2024,11月15-17)--冬季主会场

第四届大数据、人工智能与风险管理国际学术会议 (ICBAR 2024)--冬季主会场 2024 4th International Conference on Big Data, Artificial Intelligence and Risk Management 会议官网&#xff1a;www.icbar.net 2024 4th International Conference on Big Data, Artificial I…

界面设计软件:10款设计师必备工具

UI界面设计软件是设计师们不可或缺的工具&#xff0c;它们提供了一系列功能和直观的操作界面&#xff0c;助力设计师迅速打造精美且用户友好的界面。面对众多UI设计软件&#xff0c;有的提供预设模板和图标库&#xff0c;有的更侧重于原型和交互设计。如何选择最适合自己的UI设…

TCP(上):成熟可靠的传输层协议

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持! TCP&#xff08;传输控制协议&#xff09;是位于传输层的通信协议&#xff0c;是一种面向连接的、可靠的、基于字节流的传输层通信协议。主要负责在不可靠的网络环境中提供可靠的端到端字节流传输服务。TCP是…

如何在Windows中检查是否安装了GPU

文章目录 1. 系统设备管理器1.1 打开设备管理器1.2 查找显示适配器 2. 命令行工具2.1 打开命令提示符2.2 执行WMIC命令 3. DirectX诊断工具3.1 运行DirectX诊断工具3.2 查看显示信息 在Windows操作系统中&#xff0c;了解您的电脑是否配备了图形处理单元&#xff08;GPU&#x…

网络技术----wireshark抓包出现1500以上的大包原因分析

网络技术----wireshark抓包出现1500以上的大包原因分析 背景描述原因分析TSO&#xff08;TCP segment offload&#xff0c;TSO&#xff09;linux中关闭/开启TSO功能&#xff1a;其他类似TSO的机制 wireshark抓包来源 背景描述 我们在使用抓包工具的过程中&#xff0c;经常发现…