长的和vue-cli差很少的React脚手架

react-webpack-boilerplate

vue-cli的外表，React的心

说在前面

对于我我的来讲，一个好的脚手架有助于咱们心无旁骛地去学习一些库例如Vue和React。vue-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预处理器。例如你须要使用less和sass，那么你须要在./config/index的cssLoaders里面设置：

// ./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