开发自己的脚手架

因为我们使用脚手架创建项目的时候,很多配置都是没有的,比如路由的匹配,redux,这些,所以我们可以开发自己的脚手架。

第一步

我们希望可以在命令行敲下某个命令时,执行代码,如

只需要
新建两个文件,

这个注释是关键,固定用法,然后

在package.json文件加一个属性bin指定输入aaa的时候用node执行index.js,这时候在npm link后,就可以i输入aaa执行index.js文件了,效果跟node index.js一样。

那我们想跟命令呢

比如 aaa -v, aaa create xxx等等,
我们可以借助一个库,commander.js。vue的脚手架也是借助于这个库。

借助这个库就能将我们输入在命令行的指令解析并且执行

可以增在自定义的options,也可以监听help事件。当然我们希望这些配置放在一份单独的文件,


现在我们想aaa craete xxx安装我们的项目
要做的事情就是将我们放在register仓库的模板下载下来,然后npm install 然后启动项目

创建一个指令函数

输入指令运行时,就会执行action的函调函数。思路就是输入这个命令时,去仓库里面下载模板放到我们的my-app文件去。
主要是这个actions



actions四部操作,首先是clone项目,借助一个库,download-git-repo

由于这个版本比较老,所以没有Pormise的处理方式,这里有个骚操作,

node内置了util模块,可以让我们解决这个问题,让这个函数能像处理pormise一样被处理。


这样download就可以使用async await
接着第一步 clone模板


这样基本就好了,这里我用了自己写的模板,react里面有适配,redux,route的封装,qiankun包裹一层等等
https://gitee.com/fine509/react_template_ts.git
然后i初步执行aaa create test
就会从gitee上面拉去模板代码

然后执行yarn install 和yarn start就能正常启动了。第一步就大功告成了

开发自己的脚手架(react)相关推荐

  1. 快速搭建 SpringCloud 微服务开发环境的脚手架

    快速搭建 SpringCloud 微服务开发环境的脚手架 本文作者:HelloGitHub-秦人 本文适合有 SpringBoot 和 SpringCloud 基础知识的人群,跟着本文可使用和快速搭建 ...

  2. Web开发的未来:React、Falcor和ES6

    Widen是一家数字资产管理解决方案提供商.目前,其技术栈还非常传统,包括服务器端的Java.浏览器端的AngularJS.提供REST API支持的Jersey以及jQuery. Underscor ...

  3. react测试组件_测试驱动的开发,功能和React组件

    react测试组件 This article is part of my studies on how to build sustainable and consistent software. In ...

  4. react前端开发_是的,React正在接管前端开发。 问题是为什么。

    react前端开发 by Samer Buna 通过Samer Buna 是的,React正在接管前端开发. 问题是为什么. (Yes, React is taking over front-end ...

  5. 如何开发一个Node脚手架

    原因 在工作中,需要开发一个脚手架,用于给相关用户提供相关的开发便利性. 适合人群 对前端.Node 操作有一定的了解,同时想了解脚手架开发过程或者需要自己实现一个脚手架的开发者. 目标 开发一个简单 ...

  6. Nodejs开发简单的脚手架工具

    脚手架,这个名词对于作为前端的我们来说,也许并不陌生吧,像vue-cli,react-native-cli等,全局安装后,只需要在命令行中敲入一个简单的命令,便可帮我们快速的生成一个初始项目,如vue ...

  7. 使用 Node.js 开发简单的脚手架工具

    前言 像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目.在实际工作中,我 ...

  8. 开发跨平台app推荐React Native还是flutter?

    嗯...这个问题十分不好回答啊(捋下鱼须).闲鱼作为flutter领域的先驱者,以及fish_redux.flutter_boost等当红flutter库的作者,当然是欢迎广大的开发者多多使用flut ...

  9. electron开发_基于Electron+React的跨平台应用程序基础开发框架

    介绍 Electron React Boilerplate是Github上超过12k+star的可扩展跨平台应用程序开发框架,Electron 是基于HTML+CSS+Javascript等 Web ...

最新文章

  1. python的工作方向-python最赚钱的4个方向,你最心动的是哪个?
  2. 现金支付没落?澳大利亚一年内移除数百台ATM机
  3. OpenGL基础44:光照矫正(上)
  4. 进入已经打开的pyrebox_PyREBox-可用Python编写脚本的逆向工程沙盒
  5. 基于WEB的达内学子书城/商城源代码
  6. 盛世昊通谈跨界造车风潮,不同车企到底打什么主意
  7. ios frame和bounds区别
  8. 饥荒联机版服务器控制台本地和在线,饥荒联机服务器常用控制台指令
  9. 微信授权绑定手机号 java_微信小程序获取手机号授权用户登录功能
  10. 如何测试系统的并发量
  11. arachni安装与使用
  12. c#圆的周长和面积面向对象_初遇C#:一个简单的小程序(圆形周长,面积计算器)...
  13. 预制体与非预制体_为什么更多的Web设计师应该尝试使用预制网站
  14. pythonturtle简单绘图_10分钟轻松学会 Python turtle 绘图
  15. 15、Spark_RDD算子——AggregateByKey
  16. 力扣算法学习计划打卡:第八天
  17. Dynamic html实现页面上两张图片来回切换
  18. Oracle分页查询的两种方法
  19. 实战:如何运营一家淘宝店铺?
  20. 使用 Stunnel 建立加密隧道

热门文章

  1. 国家气象局提供的天气预报接口(完整Json接口)
  2. java 行政区划数据库_全国行政区域api 最新最全的全国行政区域查询
  3. 腾讯云轻量数据库服务简单测评
  4. ECNU_OJ_1026
  5. java selenium div内嵌滚动条 网页长截图发邮件
  6. 谷歌生物医学翻译软件_科研神器丨一个软件带你零基础阅读英文文献
  7. 怎样安装win10系统?(使用u盘制作启动盘并安装windows详细教程)
  8. 最优停止问题 简单综述 2005年
  9. mysql 文档生成器_最好用的数据库文档生成工具
  10. 非对称加密之RSA算法