Firef0x / startkit-app

基于webpack + gulp + react [ + redux] 前端初始化工具

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

前端应用开始工具

这是一个种子,前端项目起始于此。搭建好的初始项目架构。

工具基于 webpack + gulp + bower,使用 React 框架开发,暂有两条分支,react 分支为react架构,可用于一般项目。react_redux 分支集成了 redux 库,可以使用redux数据流。每个分支都有一些demo可供参考。

安装

准备

有些库可能需要在线编译,如果您是linux系统,请安装 make、gcc、g++

//centos
sudo yum install -y make gcc gcc-c++

// ubuntu
sudo apt-get install -y make gcc g++

如果是Windows系统,请安装 visual studio 2013 版本或以上,并安装 python2.7;

工具

需要一些全局工具

  • gulp ,构建工具
  • concurrently 并行运行多条任务

所以,需要全局安装两个库

npm i -g gulp concurrently

开始安装

建议使用 node 5.0 版本,安装依赖库

npm i

如果您正确的安装了准备阶段的工具,那您安装应该很顺利

配置文件

当安装好了之后,请将 local.js.example 命令为 local.js ,这是项目的配置文件,用于在不同的环境中使用不同配置。

使用

开发

在开发阶段,执行命令

npm start

该命令会启动一个支持实时预览的 web 服务器,并且会在每次修改代码后使用 eslint执行代码质量检查,让您的代码直线提升质量。

打包

要打包项目,执行命令

npm run build

打包后的文件在根目录的 build 文件夹,资源文件存放于resource目录,所有字体文件存放于 build/resource/font/目录,所有图片文件存放于build/resource/img目录

模拟接口 mock server

开发中需要用到模拟数据,mock可以模拟 api 接口并返回 随机产生的模拟数据

启动

当执行 npm run dev时,会将mock server同时启动,mockserver监听3001端口。 如果希望单独启动,执行:

npm run mock

关于bower

bower 是一个可选的工具,是一个不怎么推荐使用的,安装一个包时,尽量选择使用 npm 安装,如果npm 源实在没有,再使用 bower 安装,bower安装的包会存放在 app/src/vendor目录

关于 redux

redux 是一个管理状态的库,非常符合react的工作方式,所以 redux + react的工作方式是能很方便的处理那些复杂的业务逻辑;可在 react_redux分支去初始化。

启用开发者工具

相关资源

About

基于webpack + gulp + react [ + redux] 前端初始化工具


Languages

Language:JavaScript 98.2%Language:HTML 1.8%