可以自定義配置的React腳手架

xialong 發布于2019-08-20 14:49 / 1746人閱讀

摘要：和是該模版默認的代碼風格，你也可以在中使用自己喜愛的代碼風格。你也可以選擇，這個是建立在頁面里面的一個組件，你可以在代碼里自定義你需要的。

react-webpack-boilerplate

A SPA boilerplate with React, built with love.

Features

React 15.4.2

Redux 3.6.0

react-redux 5.0.2, 用來綁定 React 和 Redux.

react-router 3.0.2, 當v4發布穩定版本時, 會進行相關的更新

JSX

ES6

webpack 2.2

Express, 測試服務器

Hot-Reload, 支持 React 和 Redux!

Proxy

Environmental value

ESlint, 使用 standard 和 standard-react 進行代碼風格檢查

redux-devtools, 對 store 進行更加友好的調試

Usage

# 該模版依賴于 sao 模版系統，所以請先sao
npm install -g sao

# 下載模版
sao SidKwok/react-webpack-boilerplate new-project --install

# 安裝全部依賴
cd new-project
npm install

# 運行測試環境, 默認端口: 8080
npm run dev

# 生產環境
npm run build

# 檢查文件代碼風格 (如果有使用 eslint 的話)
npm run lint

Doc

該模版大部分參考了 vue-cli/webpack 的設計。如果你對 vue-cli 很熟悉的話, 你應該會對該模版很快上手。如果想看模版的結構，可以直接在full-features分支查看。

Pre-Processor

你可以使用 less, sass 或者 stylus 作為你的CSS預處理器，不過你首先得安裝相關的依賴。舉個?，假如你要使用 less：

npm install less less-loader --save-dev

然后，你就可以在你的組件里 import 你的 less 文件。

Proxy

該模版使用 http-proxy-middleware 來代理接口.
舉個?, 你想代理接口 /api/get-post 和 /api/get-id 到, 你可以在 config/index.js 中添加以下代碼:

...
dev: {
    proxyTable: {
        "/api": {
            target: "http://example.org",
            changeOrigin: true
        }
    }
}
...

你便可以在測試服務器中使用你所代理的接口。在這里查看更多的選項。

Env

vue-cli/webpack 的文檔詳細地介紹了環境變量地用法。

Hot-Reload

該模版使用了react-hot-loader v3來對React的組件進行熱更新，甚至支持Redux的熱更新！希望你玩的開心。

ESlint

standard 和 standard-react 是該模版默認的代碼風格，你也可以在 .eslintrc.js 中使用自己喜愛的代碼風格。

react-devtools

該模版已經默認開啟了瀏覽器的redux-devtool，但是如果要讓其工作起來，你需要下載相關的瀏覽器插件。

你也可以選擇 Customized DevTools，這個是建立在頁面里面的一個組件，你可以在代碼里自定義你需要的devtool。在這里查看更多的選項。

Production

生產環境的文件(也就是dist里的文件)是適用于真實的server的，所以你不應該直接訪問index.html。如果要對dist內的文件進行測試，你可以使用靜態服務器：

npm install -g anywhere # 或者其他靜態服務器

# 在 `./dist` 文件夾里
anywhere

TODO

[x] eslint

[ ] unit test

[ ] e2e test

[x] Redux comming soon!

[x] hot-reload for redux

[ ] better structure for redux

[x] support redux-devtools-extension

[ ] 使用happypack讓構建更快

[x] DevTools的選擇：使用瀏覽器的還是自定義的

Known Issues

當有使用react-router的時候，熱更新會導致瀏覽器的console報告錯誤信息，這是react-router v3的已知issue，但是并不影響使用。我使用了隨機數暫時解決了這個報錯的問題，謝謝@chenz24提供的解決方案。v4似乎不存在這個問題。

~~當有使用Redux的時候，熱更新會導致瀏覽器報錯 does not support changing store on the fly...，而且會導致redux熱更新無效。~~

云服務器 GPU云服務器可以自定義域名的博客自定義鏡像可以共享自定義配置配置自定義頭部

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81947.html

webpack工程化集成React技術棧（一）

項目開始前，我們先聊一聊關于項目的一些說明。該項目起始于2017年初，當時公司主要技術棧為gulp+angular，鑒于react的火熱的生態，在公司決定研發bss管理系統時選用react開發，目的也是為react native打下基礎，以解決后期公司大前端技術棧的逐步成熟。（當時沒有選擇vue開發的主要原因是weex生態還不夠特別成熟），既然決定換新，項目的構建也跟著一起換，從gulp轉向火熱的...

tianhang 2019-08-22 14:47 評論0 收藏0
在 React-CRA 應用中配合 VSCode 使用 ESLint 實踐前端代碼規范

摘要：編碼規范是獨角獸公司內部的編碼規范，該項目是上很受歡迎的一個開源項目，在前端開發中使用廣泛，本文的配置規則就是以編碼規范和編碼規范作為基礎的。更新時間：2019-01-22React.js create-react-app 項目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規范前言為什么要使用 ESLint 在項目開發過程中，編寫符合團隊編碼規...

Hujiawei 2019-08-23 14:55 評論0 收藏0
React項目筆記之create-react-app自定義ESLint配置文件

摘要：初始化項目使用創建項目此過程不做詳解，然后運行使其暴露等配置文件自定義上述步驟并沒有暴露腳手架封裝的操作，為了使得項目統一規范化，添加操作是非常不錯的選擇關于其他的操作，請參見官網，本文主要針對限制規范配置。原博客地址：https://yezihaohao.github.io 前言了解eslint基礎用法，若想更進一步了解其，請查閱官網以及相關資料(中文網) 若有問題請指出或加群...

Dogee 2019-08-20 15:25 評論0 收藏0
有個功能豐富的 react 腳手架,了解下？

摘要：前言想要快速開始多頁面應用項目結構如何更合理想要快速上手想要快速使用想要一鍵使用并能快速自定義主題樣式可以的這里，受和的啟發，我做了這樣一個的腳手架，讓你一鍵搭建項目，快速開始。前言想要快速開始 react 多頁面應用？項目結構如何更合理？想要快速上手 Mobx? 想要快速使用 TypeScript? 想要一鍵使用 Ant-Design 并能快速自定義主題樣式？可以的！！！ ...

senntyou 2019-08-23 12:56 評論0 收藏0
通過create-react-app從零搭建react環境

摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。一、快速開始：全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...

Cympros 2019-08-02 16:02 評論0 收藏0