简易脚手架搭建

cyixlq 发布于2019-08-23 15:53 / 3362人阅读

摘要：总结以上就是一个简单脚手架的实现方式，后期也会一直去更新和维护这个脚手架，公司现在新的项目就是基于这个脚手架去搭建的，因为公司现在的项目都是写的，所以的功能暂时不支持，后期也会慢慢支持

写在最前面

随着公司业务的发展，独立的系统也慢慢多了起来，脚手架的必要性也日趋明显。

基于此，便开始搭起了脚手架，主要解决两个问题：

1.项目的反复配置

2.公共组件的自动更新

代码地址点这里，可以照着代码再去看这篇文章会觉得更有思路一点

使用

1.全局按装

npm install zn-cli -g

2.创建实例

zn-cli init [templateType] [projectName]

ps：

templateType: 模板类型（暂时支持Vue和react的标准模板，后期会陆续支持后台版本，类似于antdPro）

projectName: 你需要创建的项目实例名称

3.更新脚手架中的公共文件

在你的项目实例中执行：

npm run update

安全性：首先，这个操作是不会覆盖你的业务代码，只会去更新根目录下public文件夹里的文件

可选性：每个版本更新的公共文件都会在脚手架的文档中说明，你可以选择你需要的功能对应的版本（后续再讲）

代码

1.分支

master：脚手架代码，全局安装的就是这个玩意，用来拉去对应模板生成react/vue实例的，通过npm安装使用

template分支：分支名template开头的都是模板分支。我这里就不一一列举了，因为分支会陆续的添加，脚手架里都会说明

test分支：测试分支，用来测试一些功能或者模板用的（可忽略）

2.脚手架实现

核心代码是在bin目录里，index.js为入口，点开index，可以看到，主要是对node版本做了判断，然后底部引入了cli.js,在看这些代码之前，首先得闲确定你是对以下几个node包是了解的：

commander：处理用户命令行输入

download：clone git远程仓库代码

其他有一些包是辅助类的，比如chalk，ora等，不了解也没关系。

先看代码：

大致流程：

1.获取用户输入

2.根据用户输入判断是需要什么模板，下载对应模板到用户输入的项目目录中

3.模板下载完成后，调用_cli下面的_reWritePackageJson方法，去更改实例中package.json中的一些配置

4.log里面的东西是一些提示性信息

基本脚手架就是这个流程，根据用户输入去拉去对应的模板代码到指定的目录。

可能你注意到在模板下载完成时我执行了一个进程：

spawn("rm", ["-rf", `${name}/build.js`]);

删除创建的项目中的build.js文件，为什么，因为这个js是用来更新模板，就像上面我说到的执行npm run update的时候就是通过这个js去做处理的。显然，他应该只存在于脚手架的模板中，而不应该出现在用户的项目实例中。对于用户而言，它是无用的。

总结

以上就是一个简单脚手架的实现方式，后期也会一直去更新和维护这个脚手架，公司现在新的项目就是基于这个脚手架去搭建的，因为公司现在的项目都是react写的，所以Vue的功能暂时不支持，后期也会慢慢支持vue...

服务器托管专线服务脚手架脚手架使用项目脚手架 js脚手架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102518.html

随我来基于webpack构建一个简易的vue脚手架 (webpack系列二)

摘要：构建文件清理构建目录下的文件打包工具编译文件模板函数编译与配合使用入口处理项目中的不同类型的模块。前言之前有写了一篇webpack的文章(认识篇) 猛戳,大家对于webpack基本概念(entry,output,loader,plugin,mode...)应该是有了较模糊的认识.今天希望在通过(对于vue-cli的效仿)搭建一个自己的脚手架的途中对于概念会有更深刻的认识. 目录 1...

tomorrowwu 2019-08-23 13:05 评论0 收藏0
Vuejs自己的构建工具

摘要：然而，这些模板并不限制你自己对于使用的架构组织和选择类库。目前可用的模板包括全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。最近，尤大在和人对喷的时候，悄然放出了一个大招，于是为了追赶他的步伐，赶紧试验了下，并且把原文给大家翻译下。原文地址：Announcing vue-cli 译文源地址： Vuejs自己的构建工具先上原文翻译：最近有很多大量关于Reac...

leoperfect 2019-08-19 17:20 评论0 收藏0
vue2全家桶+koa2+mongodb搭建一个简单伪全栈博客

摘要：本来不想推的，看到上有个项目很简单，都有，推推看咯。虽然这个项目很简单，但是还蛮有趣，用来入门和以及再好不过了。本来不想推的，看到github上有个项目很简单，都有300 star，推推看咯。虽然这个项目很简单，但是还蛮有趣，用来入门vue2和nodejs以及mongodb再好不过了。等这几天把公司手头的事情忙完，再把vuex的部分强化下。基于vue2/vuex/vue-rout...

bitkylin 2019-08-21 17:19 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0