長的和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