自己实现一个自定义React项目脚手架「ReactCli」

Jacquelyn38
• 阅读 1556

前言

首先为什么想到自己实现一个React脚手架呢?是因为之前刚接触create-react-app时,觉得不太灵活。虽然文件目录很清晰,但是还是觉得不如VueCLI的可以自定义配置更加灵活。当然React官方提供了可以暴露配置的命令npm run eject,说再多不如自己实现一个。

脚手架一览

自己实现一个自定义React项目脚手架「ReactCli」

文档

Project operation

Install

npm install  

Start

npm run dev  

Build

npm run build  

Document implication

build

Webpack configuration item.

mock

Analog data.

public

Template file.

.babelrc

Babel configuration.

.gitignore

There is no need to add NPM packages.

postcss.config.js

Postcss configuration file.

src

Project home folder.

SRC folder main file

assets

Static folder.

component

Place to store components.

request

HTTP request configuration.

router

Routing configuration.

store

State management.

utils

Tool library.

view

Where the page is stored.

App.jsx

Project template.

index.js

Project entry document.

源码地址

https://github.com/maomincoding/ReactCli  

结语

可以根据自己的需求自己再进行二次加工。欢迎Star!


欢迎关注我的公众号,回复关键词【电子书】,即可获取近十几本前端热门电子书。更有精品文章等着你哦。你还可以加我微信,我拉拢了很多IT大佬,创建了一个技术交流、文章分享群,欢迎你的加入。

  • 作者:Vam的金豆之路

  • 主要领域:前端开发

  • 我的微信:maomin9761

  • 微信公众号:前端历劫之路

自己实现一个自定义React项目脚手架「ReactCli」


本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/aDXHS6ChskhJEFR0CwFukA,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
MLtech MLtech
3年前
Create React App
CreateReactAppCreateReactAppFacebook开源了React前端框架(MITLicence),也同时提供了React脚手架createreactapp(ht
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Karen110 Karen110
3年前
正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp
前言今天,篇幅可能比较短,主要介绍最近这段时间开发的一款脚手架——FastReactApp。这是一款基于Parcel2开发的React.js项目脚手架。虽然比不上正在前端界火爆的Vite以及占据稳定地位的CreateReactApp,但是基本的项目开发还是可以的。下面我将介绍FastReactApp几点特征:对JS、CSS、HTML、文件资产等的
Stella981 Stella981
3年前
React的使用方法(脚手架的方法)
使用react加脚手架创建一个项目:npminstallcreatereactappgcreatereactappmyappcdmyappyarnstartnpx:帮助我们更方便的找到本地安装的命令.\\node\_mo
Stella981 Stella981
3年前
React项目中应对开发、测试、生产环境下使用不同全局常量的问题
在开发过程中,避免不了后端在开发、测试、生产环境不一致的情况,这不最近就遇到这样的问题:在开发和测试环境,后端需要一个参数比如:zonehk1,在生产环境中需要的参数又是zonehka,那么解决这种问题的方法也不是唯一的,这里只介绍一种通过配置文件完成的过程。我们在构建react项目时,会执行npmruneject,导出react脚手架
Python进阶者 Python进阶者
11个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这