成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

xialong / 1757人閱讀

摘要：和是該模版默認(rèn)的代碼風(fēng)格，你也可以在中使用自己喜愛(ài)的代碼風(fēng)格。你也可以選擇，這個(gè)是建立在頁(yè)面里面的一個(gè)組件，你可以在代碼里自定義你需要的。

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, 用來(lái)綁定 React 和 Redux.

react-router 3.0.2, 當(dāng)v4發(fā)布穩(wěn)定版本時(shí), 會(huì)進(jìn)行相關(guān)的更新

JSX

ES6

webpack 2.2

Express, 測(cè)試服務(wù)器

Hot-Reload, 支持 React 和 Redux!

Proxy

Environmental value

ESlint, 使用 standard 和 standard-react 進(jìn)行代碼風(fēng)格檢查

redux-devtools, 對(duì) store 進(jìn)行更加友好的調(diào)試

Usage 
# 該模版依賴于 sao 模版系統(tǒng)，所以請(qǐng)先sao
npm install -g sao

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

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

# 運(yùn)行測(cè)試環(huán)境, 默認(rèn)端口: 8080
npm run dev

# 生產(chǎn)環(huán)境
npm run build

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

該模版大部分參考了 vue-cli/webpack 的設(shè)計(jì)。 如果你對(duì) vue-cli 很熟悉的話, 你應(yīng)該會(huì)對(duì)該模版很快上手。如果想看模版的結(jié)構(gòu)，可以直接在full-features分支查看。

Pre-Processor

你可以使用 less, sass 或者 stylus 作為你的CSS預(yù)處理器，不過(guò)你首先得安裝相關(guān)的依賴。舉個(gè)?，假如你要使用 less：

npm install less less-loader --save-dev

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

Proxy

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

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

你便可以在測(cè)試服務(wù)器中使用你所代理的接口。在這里查看更多的選項(xiàng)。

Env

vue-cli/webpack 的文檔詳細(xì)地介紹了環(huán)境變量地用法。

Hot-Reload

該模版使用了react-hot-loader v3來(lái)對(duì)React的組件進(jìn)行熱更新，甚至支持Redux的熱更新！希望你玩的開(kāi)心。

ESlint

standard 和 standard-react 是該模版默認(rèn)的代碼風(fēng)格，你也可以在 .eslintrc.js 中使用自己喜愛(ài)的代碼風(fēng)格。

react-devtools

該模版已經(jīng)默認(rèn)開(kāi)啟了瀏覽器的redux-devtool，但是如果要讓其工作起來(lái)，你需要下載相關(guān)的瀏覽器插件。

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

Production

生產(chǎn)環(huán)境的文件(也就是dist里的文件)是適用于真實(shí)的server的，所以你不應(yīng)該直接訪問(wèn)index.html。如果要對(duì)dist內(nèi)的文件進(jìn)行測(cè)試，你可以使用靜態(tài)服務(wù)器：

npm install -g anywhere # 或者其他靜態(tài)服務(wù)器

# 在 `./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讓構(gòu)建更快

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

Known Issues

當(dāng)有使用react-router的時(shí)候，熱更新會(huì)導(dǎo)致瀏覽器的console報(bào)告錯(cuò)誤信息，這是react-router v3的已知issue，但是并不影響使用。我使用了隨機(jī)數(shù)暫時(shí)解決了這個(gè)報(bào)錯(cuò)的問(wèn)題，謝謝@chenz24提供的解決方案。v4似乎不存在這個(gè)問(wèn)題。

當(dāng)有使用Redux的時(shí)候，熱更新會(huì)導(dǎo)致瀏覽器報(bào)錯(cuò) does not support changing store on the fly...，而且會(huì)導(dǎo)致redux熱更新無(wú)效。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81947.html

相關(guān)文章

  • webpack工程化集成React技術(shù)棧（一）

    項(xiàng)目開(kāi)始前，我們先聊一聊關(guān)于項(xiàng)目的一些說(shuō)明。該項(xiàng)目起始于2017年初，當(dāng)時(shí)公司主要技術(shù)棧為gulp+angular，鑒于react的火熱的生態(tài)，在公司決定研發(fā)bss管理系統(tǒng)時(shí)選用react開(kāi)發(fā)，目的也是為react native打下基礎(chǔ)，以解決后期公司大前端技術(shù)棧的逐步成熟。（當(dāng)時(shí)沒(méi)有選擇vue開(kāi)發(fā)的主要原因是weex生態(tài)還不夠特別成熟），既然決定換新，項(xiàng)目的構(gòu)建也跟著一起換，從gulp轉(zhuǎn)向火熱的...

    tianhang 評(píng)論0 收藏0

  • 在 React-CRA 應(yīng)用中配合 VSCode 使用 ESLint 實(shí)踐前端代碼規(guī)范

    摘要：編碼規(guī)范是獨(dú)角獸公司內(nèi)部的編碼規(guī)范，該項(xiàng)目是上很受歡迎的一個(gè)開(kāi)源項(xiàng)目，在前端開(kāi)發(fā)中使用廣泛，本文的配置規(guī)則就是以編碼規(guī)范和編碼規(guī)范作為基礎(chǔ)的。 更新時(shí)間：2019-01-22React.js create-react-app 項(xiàng)目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規(guī)范 前言 為什么要使用 ESLint 在項(xiàng)目開(kāi)發(fā)過(guò)程中，編寫符合團(tuán)隊(duì)編碼規(guī)...

    Hujiawei 評(píng)論0 收藏0

  • React項(xiàng)目筆記之create-react-app自定義ESLint配置文件

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

    Dogee 評(píng)論0 收藏0

  • 有個(gè)功能豐富的 react 腳手架,了解下？

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

    senntyou 評(píng)論0 收藏0

  • 通過(guò)create-react-app從零搭建react環(huán)境

    摘要：通過(guò)文件可以對(duì)圖標(biāo)名稱等信息進(jìn)行配置。注意，注冊(cè)的只在生產(chǎn)環(huán)境中生效，并且該功能只有在下才能有效果該文件是過(guò)濾文件配置該文件是描述文件定義了項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息比如名稱版本許可證等元數(shù)據(jù)。 一、 快速開(kāi)始： 全局安裝腳手架： $ npm install -g create-react-app 通過(guò)腳手架搭建項(xiàng)目： $ create-react-app 開(kāi)始項(xiàng)目： ...

    Cympros 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<