juejin.im
获得徽章 0
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
最近在写 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 树的时候会报错，那么怎么办呢？我已经用一种奇技淫巧解决了，问题留给你们做个小小的思考😀
这里有个问题，在处理 router.js 文件的时候，遇到了 import('xxx') 这种 webpack 支持的动态 import 语法，这个在转换成 AST 树的时候会报错，那么怎么办呢？我已经用一种奇技淫巧解决了，问题留给你们做个小小的思考😀
展开
4
15
赞了这篇文章
赞了这篇文章
赞了这篇沸点
1
18
赞了这篇文章
赞了这篇文章
昨天聊到了开发 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> 即可。
先去到插件开发的目录 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
来 Zoom 这边也有快 3 个月了，推行了一套能适应现有老架构方式下的前后端分离的开发方案，并且有个重构的试点项目已经快开发完了。
在这期间除了把我们的内部 Vue 组件库搞起来外，还搭建了 npm 私服，编写了 i18n、数据 mock 等 webpack 插件，线下部署脚本等。今天也基于重构项目的经验，编写了一个 Vue cli 3 的插件作为项目脚手架。
这中间踩了很多坑，也解决了很多有意思的问题。比如开发 Vue cli 插件，调试插件是一个头疼的问题，我目前是先通过 vue create 创建一个新项目，然后把插件的代码拷贝到项目的 node_modules 目录下，然后通过 vue inovke 的方式调试，不知道大家有没有更好的方案分享下呀~
在 Zoom 的经验还是蛮有意思的，面临的问题可能是很多有技术历史债的大公司共同面临的问题，在这种环境下做前端架构是一个蛮有挑战的事情，还要多思考公司看重什么，你的重构方案能给大家带来哪些收益，又会增加哪些成本。这部分内容以后有机会会单独写篇文章分享~
在这期间除了把我们的内部 Vue 组件库搞起来外，还搭建了 npm 私服，编写了 i18n、数据 mock 等 webpack 插件，线下部署脚本等。今天也基于重构项目的经验，编写了一个 Vue cli 3 的插件作为项目脚手架。
这中间踩了很多坑，也解决了很多有意思的问题。比如开发 Vue cli 插件，调试插件是一个头疼的问题，我目前是先通过 vue create 创建一个新项目，然后把插件的代码拷贝到项目的 node_modules 目录下，然后通过 vue inovke 的方式调试，不知道大家有没有更好的方案分享下呀~
在 Zoom 的经验还是蛮有意思的，面临的问题可能是很多有技术历史债的大公司共同面临的问题，在这种环境下做前端架构是一个蛮有挑战的事情，还要多思考公司看重什么，你的重构方案能给大家带来哪些收益，又会增加哪些成本。这部分内容以后有机会会单独写篇文章分享~
展开
19
25