react-webpack-boilerplate

vue-cli的外表，React的心

说在前面

对于我个人来说，一个好的脚手架有助于我们心无旁骛地去学习一些库例如Vue和React。就是一个非常好的例子，简单易用，而且集成了许多流行的元素例如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# 测试环境，默认端口: 3000npm run dev# 生成项目npm run build

文档

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

预处理器

你可以使用你喜欢的css预处理器。例如你需要使用less和sass，那么你需要在./config/index的cssLoaders里面设置：

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

别忘了安装相应的依赖。

处理静态文件

相关的可以看。

全局变量

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

接口代理

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

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

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

一些还没有做的事情

• [] 各种测试

• [] eslint

• [] cli