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

前言

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

脚手架一览

文档

Project operation

Install

1npm install 2

Start

1npm run dev 2

Build

1npm run build 2

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.

源码地址

1https://github.com/maomincoding/ReactCli 2

结语

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


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

  • 作者:Vam的金豆之路

  • 主要领域:前端开发

  • 我的微信:maomin9761

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


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

点赞
收藏

评论区

加载中...

相关推荐

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

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

Create React App

CreateReactAppCreateReactAppFacebook开源了React前端框架(MITLicence),也同时提供了React脚手架createreactapp(ht

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )