关于为了少搬砖,而用node手写了一个React脚手架这件事

本文介绍了作者为减少重复构建React项目的工作,而使用Node.js自制React脚手架的过程。文章详细讲解了脚手架的实现步骤,包括脚本执行原理、初始化设置、实现--help指令、自动创建项目及组件的逻辑。通过这个过程,读者可以了解到如何创建自定义的项目构建工具。
摘要由CSDN通过智能技术生成

前言

hellow,大家好。最近刚写完一个react项目,又想写一个练练手,可是我突然发现一个问题。那就是又要从零构建一个完整的项目环境,避免不了要重复搬砖搬砖还是搬砖,确实挺麻烦,可能得花费20多分钟。啥?我项目都还没写就花了我半小时?气愤之下,我立刻想了个好主意,我能不能用node写个脚手架呢?就像vue react它们的脚手架一样,直接运行vue create xxx 就直接把它那套模板搬过来了,可是我的明显是基于他们之上再结合自己日常项目需求所需的额外的包来搭建我们的项目。现在很多公司都有自己的脚手架,无非是根据自己公司的项目来定制的一套模板而已,并且在此基础之上添加了一些脚本命令,再生成特定的文件夹和文件一系列操作。就比如创建一个store,我们可能需要下面这样的结构

启程

脚本是如何执行的?

大家在用脚手架创建项目时有没有这样的困惑,为啥敲个vue create xxx 它就知道帮我创建项目,它是如何运行的呢?我们要怎么实现呢?让我们带着问题一步一步实现吧。乍看觉得很复杂,其实当我们深入了解的时候就会发现,其实也没有这么难。

初始化

新建一个acr-cli 文件夹 寓意:a auto react cli 自动构建react项目执行脚本

npm init -y

初始化生成 package.json 文件新建index.js 入口文件先下载 commander 模块 辅助我们执行终端命令先实现一个最简单的命令 acr -V 或者 acr --version 查看我们脚手架版本

index.js

开头这个注释很重要!!这是标记运行脚本,不能省略

#!/usr/bin/env node
const program = require('commander')

// 查看版本号
program.version(require('./package.json').version)

// 解析终端指令
program.parse(process.argv); 
package.json

**注意添加 bin对象 这段指令!**指定脚本执行的入口文件即后续操作

{"name": "acr-cli","version": "1.0.0","description": "a auto create react cli","main": "index.js","bin": {"acr": "index.js"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["react","vue","acr"],"author": "kzj","license": "MIT","homepage": "https://github.com/kzj0916","repository": {"type": "git","url": "https://github.com/kzj0916"},"dependencies": {"commander": "^6.1.0","download-git-repo": "^3.0.2","ejs": "^3.1.5"}
} 

修改完成后,执行脚本

npm link

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值