长的和vue-cli差不多的React脚手架

react-webpack-boilerplate

vue-cli的外表,React的心

说在前面

对于我个人来说,一个好的脚手架有助于我们心无旁骛地去学习一些库例如VueReactvue-cli就是一个非常好的例子,简单易用,而且集成了许多流行的元素例如ES6热更新之类的。我之前写了一个小项目就是完全基于这个脚手架来做的,这个开发流程非常的愉悦。当然,在github上面也会有许多现成的react的spa项目模版,但是对于我来说总是觉得多了一些什么或少了一些什么,特别是当我从Vue转到React的时候,会有很多的不习惯。所以说,为什么不弄个React的呢?我的想法就是将vue-cli和react-webpack-boilerplate尽量保持一致,除了它们的核心: Vue和React。

我希望这个spa模版能解决大家在环境配置上遇到的种种问题,也希望习惯于vue-cli的同学能够通过这个模版无缝地接入React。

图片描述

项目地址

特性

  • React 15.3.1

  • JSX

  • ES6

  • Webpack

  • Express dev server

  • Hot-Reload

  • Proxy 接口代理

  • Global-Variable 全局变量,用来区分线上线下环境

使用

可以先将项目clone或者fork下来。

# 安装依赖 npm install  # 测试环境,默认端口: 3000 npm run dev  # 生成项目 npm run build

文档

你可以直接看vue-cli的文档来配置你的项目,但是针对其中的一些使用方法我在这里简述一下。

预处理器

你可以使用你喜欢的css预处理器。例如你需要使用lesssass,那么你需要在./config/indexcssLoaders里面设置:

// ./config/index module.exports = {     // set your css loaders     cssLoaders: ['less', 'sass'],     ... }

别忘了安装相应的依赖。

处理静态文件

相关的可以看这里
项目对./static下的静态文件只是简单地进行复制粘贴,所以引入的时候你需要使用相对路径/static/blah.js。webpack并不会对该文件夹下的文件进行处理。

全局变量

整个项目会有一个全局变量process.env,你可以通过它来设置测试环境与生产环境的区别,例子可以看这里

接口代理

这个是非常有用的工具,可以脱离后端进行开发,后端提供接口就可以了。举个板栗,你项目的端口是3000,后端项目的端口是5000,你需要使用一个叫/api的接口,那么你需要这样子做。

// ./config/index.js module.exports = {     ...     dev: {         ...         proxyTable: {             '/api': {                 target: 'local:5000',                 changeOrigin: true             },         },     } }

酱紫就可以愉快地使用/api接口啦。更多设置看这里

一些还没有做的事情

  • [] 各种测试

  • [] eslint

  • [] cli

脚本宝典为你提供优质服务
脚本宝典 » 长的和vue-cli差不多的React脚手架

发表评论

提供最优质的资源集合

立即查看 了解详情