从零开始搭建前端脚手架搭建

本是古典何须时尚 2022-12-17 07:10 326阅读 0赞

# 需要的功能 #

一、具备问询功能，可以获取定制化信息。  
二、根据问询结果，以不同模板去创建项目。

# 核心原理 #

一、本质是从远程仓库把不同的模板拉取到本地。  
1、模板是一个完整的项目，包含项目的完整结构和信息  
二、cli下载项目时，复制项目的同时，将问询得到的定制化信息写入项目配置

# 准备工作 #

一、注册npm

# cli的编写 #

## 项目目录 ##

|— bin
    |	|- begin
    |— src
    |	|- add.js
    |— .gitignore
    |— .npmrc
    |— README.md
    |— package.json
    |— templates.json

## 依赖及其作用 ##

一、package.json

"dependencies": {
        "chalk": "^4.1.0",
        "child_process": "^1.0.2",
        "commander": "^6.1.0",
        "download-git-repo": "^3.0.2",
        "fs-extra": "^9.0.1",
        "inquirer": "^7.3.3",
        "mem-fs": "^1.2.0",
        "mem-fs-editor": "^7.0.1",
        "ora": "^5.1.0"
      }

1、实现功能  
`commander`：负责读取命令  
`inquire`：负责问询  
`download-git-repo`：负责下载对应模板项目的git仓库  
`fs-extra`：负责文件的复制  
`mem-fs`  
`mem-fs-editor`：负责模板的赋值以及嵌入模板字符串，它需要依赖mem-fs  
`child-process`: 负责执行命令行  
2、更好的交互体验  
`chalk`：改变命令行输出样式  
`ora`：优雅的命令行交互spinner

## 解析命令 ##

## 问询 ##

## 下载git仓库 ##

## 复制文件，将信息写入模板 ##

# 调试发布 #

## 调试 ##

一、必须要打成全局包才可以使用pacakge.json中的bin中的命令  
二、打成全局包  
1、npm install . -g  
2、npm link  
三、命令行输入cra-cli

## 发布 ##

npm publish

发表评论取消回复

表情：

评论列表（有 0 条评论，326人围观）

还没有评论，来说两句吧...

相关阅读

相关搭建前端脚手架

1.什么是脚手架 > 脚手架用于快速生成新项目的目录模板，并集成一系列体系化工具的安装,无需自己从零开始一步步配置，减少copy操作，有效提升开发体验和效率，尽管

我就是我/ 2022年12月31日 07:30/ 0 赞/ 282 阅读

相关从零开始搭建SpringCloud Alibaba

从零开始搭建SpringCloud Alibaba SpringCloud Alibaba Spring Cloud Alibaba 致力于提供微服务开发的一站式解

青旅半醒/ 2022年12月17日 07:23/ 0 赞/ 280 阅读

相关从零开始搭建前端脚手架搭建

需要的功能一、具备问询功能，可以获取定制化信息。二、根据问询结果，以不同模板去创建项目。核心原理一、本质是从远程仓库把不同的模板拉取到本地。 1、

本是古典何须时尚/ 2022年12月17日 07:10/ 0 赞/ 327 阅读

相关从零搭建一个 React 项目（非脚手架）

从零搭建一个 React 项目（非脚手架）前言 1. 创建根目录 2. 安装 react 3. 安装

谁践踏了优雅/ 2022年11月21日 01:05/ 0 赞/ 353 阅读

相关从零开始搭建React+TypeScript项目

主要的依赖： React16.12+ TypeScript3+ tslint5+ react-router5+ react-redux7+ axios0.19+

旧城等待，/ 2022年11月05日 06:24/ 0 赞/ 301 阅读

相关从零开始搭建一个HTTPS网站

转自：[http://cjting.me/web2.0/2016-09-05-%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E6%90%AD%E5%

一时失言乱红尘/ 2022年07月13日 02:52/ 0 赞/ 280 阅读

相关从零开始搭建Mybatis框架

Mybatis是一个基于java的持久型框架，有了Mybatis，终于可以不用写jdbc代码这种东西了，写个搭建Mybatis框架过程，就当做个笔记吧。（一）新建一个web

冷不防/ 2022年05月15日 06:07/ 0 赞/ 420 阅读

相关 IDEA从零开始搭建SpringBoot工程

下面就给大家介绍一下IDEA从零开始搭建一个SpringBoot工程（1）File->new,选择maven，创建一个空项目，直接next. ![在这里插入图片描述

超、凢脫俗/ 2022年04月16日 04:22/ 0 赞/ 369 阅读

相关 vue从零搭建脚手架教程

文章目录 1.下载node 2.安装cnpm 3.安装vue-cli 4.开始创建项目 5.安装依赖 6.启动项目 1.下载nod

喜欢ヅ旅行/ 2021年12月04日 05:07/ 0 赞/ 288 阅读

相关从零开始搭建一个vue.js的脚手架

本文章来自装载 https://blog.csdn.net/qq\_32347235/article/details/58134723 从零开始搭建一个vue.js的脚

太过爱你忘了你带给我的痛/ 2021年09月15日 14:12/ 0 赞/ 405 阅读