fast163
a scaffold for frontend developer to develop web app based webpack,react
Last updated 4 months ago by bjyangxiuwu .
GPL-3 · Original npm · Tarball · package.json
$ cnpm install fast163 
SYNC missed versions from official npm registry.

Frontend Lazy Dog

一行命令创建react+redux+webpack前端应用,创建后立刻使用,包含开发服务器,发布流程,样本代码集成redux,路由,按需加载等。

希望使用工具后,大家像图片上的狗一样轻松。

创建背景

react 在中国并不流行

这是 2019 年初的前端框架使用统计,根据 google 搜索指数,npm 包下载,职位关键词等统计:https://medium.com/javascript-scene/top-javascript-frameworks-and-topics-to-learn-in-2019-b4142f38df20 根据统计,全球 react 使用程度远超 vue。 但是在中国,我身边的同事和网上的反馈来看,用 vue 不比 react 少太多,甚至更多。

react 需要的先决条件太多

这个现象的原因是 react 上手太难了,不是 react 的语法难,而是要想用好 react,你需要的条件太多了: 你需要 配置 webpack 打包编译,配置各种插件优化打包,需要弄一个 server 来作为本地开发服务器,需要一个状态管理库并和 react 集成在一起。需要单独的路由库集成进 react,需要一个 ajax 库。你还要有良好的设计模式基础来组织 react 及状态管理的代码和目录以发挥它的易维护,易拓展功能。。对于现在普遍图块,压缩开发周期的团队来说,我要学的东西太多了,老子直接用 vue,自带 cli,直接用就行了。。

这个库的作用就是你只需一条命令,直接创建整个新项目,解决了不仅限于上边的所有问题。使用者只需要直接开始开发即可,然后根据需要调整下配置或环境变量即可,所有复杂的东西都给你弄好了。

为什么我不用 creat-react-app

有朋友会问,create-react-app 不是挺好的吗,我承认,creat-react-app 就是一个和我的库功能相似的 react 官方脚手架。而且这个库就是基于 create-react-app 产生的。许多思想和方法都是直接借鉴的,但是它有一些问题。

create-react-app 的问题

难以定制化

安装后所有配置文件和依赖都不在项目代码里,都在 node_module 里,对用户隐藏,这就导致我无法根据需求定制,虽然你可以弹出,但是它的很多底层配置和工具都是 react 的 npm 包,你无法保存修改 我的库直接把所有配置和依赖都复制放到 ci 目录里,随意用户定制或修改代码

难以保持统一

每次安装都是 npm install,即使有 package-lock.json 文件,仍然有可能会造成版本的变化 - 我的库使用 npm ci 安装依赖,高速,并且完全和 package-lock.json 统一

无发布功能

只有编译,不提供 ftp 上传等功能。- 我的库还提供 git 操作,ftp 等发布功能

代理功能较弱

默认的代理支队 url 进行一些简单的判断,没有更复杂的配置可供选择。- 我的库直接实现了一个代理中间件,除了猜测是否需要代理规则外,还可以进行复杂配置

无后端 mock 功能

我的库实现了 mock 数据,直接读文件,不会触发编译

样本代码简单

没有集成状态管理,没有集成路由,对于一个单页应用来说,还需要写很多代码才能真正使用上。 - 我的库集成了 redux,路由,可一键切换动态加载和整体打包,并且样本代码都是最佳实现,重构过多次的代码并附带单元测试

如何使用

创建新项目

npx app-scaffold-ci 目标文件夹

目录结构

/bin                            创建新项目相关脚本
/ci                             脚手架及工具相关,会把这个目录拷贝到新项目根目录
    /devServer                      本地开发服务器业务相关代码
    /errorLog                       错误日志记录
    /prod                           生产发布业务相关代码
    /templateCodeCreate             自动创建子系统,组件,相关脚本代码。
    /unitTest                       单元测试相关代码
    /common                         开发服务器和生产发布业务公用的工具或配置代码
/template                       样本代码,创建新目录时候会把该文件夹做定制然后拷贝到目标文件夹
    /.vscode                        vscode配置(debug和通用配置)
    /bin                            npm脚本的快捷命令
    /build                          打包输出目录
    /mock                           模拟数据存放目录
    /public                         非引用静态文件(favicon,index.html等)
    /src                            源代码目录
        /asset                          静态文件
        /common                         存放公共的组件和方法等
            /router                         路由组件
            /app                            最外层包装组件
            /moduleImport                   用来根据路由加载模块,可更改index的注释切换按需加载还是整体打包
        /domain                         业务逻辑,每个子文件都是一个独立的子系统,相互隔离
        /index.js                       打包入口js
        /store.js                       redux仓库
        /rootReducer.js                 根reducer
        /registerServiceWorker.js       serviceWork配置
    jest.config.js                  jest配置文件
    pkg-lock.json                   npm包依赖,new新项目时候,严格按照这个安装
    pkg.json                        npm包依赖
    prettier.config.js              提交git时候执行代码格式化的配置文件
    readme.md                       系统介绍,包含基本使用方法

功能图

Current Tags

  • 0.0.6                                ...           latest (4 months ago)

6 Versions

  • 0.0.6                                ...           4 months ago
  • 0.0.5                                ...           4 months ago
  • 0.0.4                                ...           4 months ago
  • 0.0.3                                ...           5 months ago
  • 0.0.2                                ...           5 months ago
  • 0.0.1                                ...           5 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 12
Dependencies (5)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |