
获得徽章 0
- 昨天聊到了开发 Vue cli 插件的问题,有朋友提醒我可以通过 npm link 方便调试 npm 包,今天来公司尝试一下,亲测可用,非常方便(新技能 get)
先去到插件开发的目录 vue-cli-plugin-xxx,执行 npm link
再通过 vue create example 创建一个测试项目,进入这个项目后执行 npm link vue-cli-plugin-xxx(包名)
由于 Vue cli 在 invoke 插件的時候自己会去 findPlugin 检测插件是否安装,这里我们先在项目的 package.json 中的 devDependencies 手动添加这个 vue-cli-plugin-xxx 依赖,然后再去项目目录下执行 vue invoke vue-cli-plugin-xxx 就可以完成调试了。
另外 Vue cli 3.1 以上版本是支持私服的,如果你编写的插件添加的依赖是放在 npm 私服上的,执行 vue invoke 命令的时候加上 --regisrty <url> 即可。展开评论21 - 最近在写 Vue-cli 脚手架插件的时候遇到一个场景,如果用户初始化项目的时候引入了 Vue-Router 和 Vuex,我需要把文件中的 import Vue from 'vue' 替换成 const Vue = window.Vue(这么做是我们这边项目的特殊场景所致),那么在 eslint 规范中,import 语句是放在文件顶部,所以简单的字符串替换是不可以的,你需要把这行代码插入到最后一个 import 语句的后面。因此我用了 recast 这个库先把代码生成 AST 树,再去修改 AST 树,最后再生成 code。
这里有个问题,在处理 router.js 文件的时候,遇到了 import('xxx') 这种 webpack 支持的动态 import 语法,这个在转换成 AST 树的时候会报错,那么怎么办呢?我已经用一种奇技淫巧解决了,问题留给你们做个小小的思考😀展开415