個(gè)人經(jīng)驗(yàn)總結(jié)
不要太過迷信網(wǎng)上的各種demo，還是要自己對(duì)工具有一定的理解。
收集到的資料
- 阮一峰老師寫的demo，比較基礎(chǔ)，入門
- 也是比較基礎(chǔ)的入門教程
開發(fā)插件、loader、依賴包
----react、redux相關(guān)----
react
npm install react react-dom --save
redux
npm install redux --save
react-redux
npm install react-redux --save
reselect
npm install reselect --save
Simple “selector” library for Redux
react-router
npm install react-router --save
react-router-redux
npm install react-router-redux --save
redux-thunk
npm install redux-thunk --save
Thunk middleware for Redux.
----webpack相關(guān)----
webpack
npm install webpack --save-dev
webpack-dev-server
npm install webpack-dev-server --save-dev
----loader相關(guān)----
css-loader
npm install css-loader --save-dev
css-loader會(huì)遍歷css文件，找到所有的url(...)并且處理。
style-loader
npm install style-loader --save-dev
style-loader會(huì)把所有的樣式插入到你頁面的一個(gè)<style>標(biāo)簽當(dāng)中
sass-loader
npm install sass-loader node-sass --save-dev
要用sass-loader，必須有node-sass，但是這個(gè)模塊有可能被墻掉，可以參考安裝 node-sass 的正確姿勢(shì)， 如不實(shí)在裝不了才用連接中的方法
file-loader
npm install file-loader --save-dev
url-loader
npm install url-loader --save-dev
根據(jù)你的需求將一些圖片自動(dòng)轉(zhuǎn)成base64編碼的，為你減輕很多的網(wǎng)絡(luò)請(qǐng)求。
主要，要先有file-loader
// 如果圖片小于8192 bytes，就會(huì)轉(zhuǎn)成Data URL
loaders: [
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
]
----ES6相關(guān)----
babel-loader
npm install babel-loader babel-core babel-preset-es2015 --save-dev
babel就不多說了，將ES6的語法轉(zhuǎn)成ES5
babel-preset-react
npm install babel-preset-react --save-dev
只是我的個(gè)人猜測，這個(gè)讓babel支持JSX的轉(zhuǎn)換
結(jié)合上一個(gè)babel-loader，要在根目錄下創(chuàng)建一個(gè) .babelrc 文件，文件里寫下面的內(nèi)容
{
"presets": ["react", "es2015"]
}
babel-plugin-transform-es2015-modules-simple-commonjs
npm install babel-plugin-transform-es2015-modules-simple-commonjs --save-dev
Babel轉(zhuǎn)換es6怎么支持ie8?
該插件可以解決上述問題
要在根目錄下創(chuàng)建一個(gè) .babelrc 文件，文件里寫下面的內(nèi)容
{
"presets": ["es2015"],
"plugins": [
"transform-es2015-modules-simple-commonjs"
]
}
isomorphic-fetch
npm install isomorphic-fetch es6-promise --save-dev
fetch API，具體見:
Fetch API
【翻譯】這個(gè)API很“迷人”——(新的Fetch API)
Redux 中文文檔Redux 中文文檔也有提到一些
// 在應(yīng)用中其它任何代碼執(zhí)行前調(diào)用一次
import 'babel-polyfill'
// 每次使用 `fetch` 前都這樣調(diào)用一下
import fetch from 'isomorphic-fetch'
babel-polyfill
npm install babel-polyfill --save-dev
話說我也不知道這個(gè)是什么鬼，不過上面的isomorphic-fetch需要用到，有人可以補(bǔ)充一下嗎？
----ES7相關(guān)----
babel-plugin-transform-object-rest-spread
npm install babel-plugin-transform-object-rest-spread --save-dev
要在根目錄下創(chuàng)建一個(gè) .babelrc 文件，文件里寫下面的內(nèi)容
{
"plugins": ["transform-object-rest-spread"]
}
----redux相關(guān)----
redux-logger
npm install redux-logger --save-dev
這個(gè)只是一個(gè)記錄器中間件，用不用也沒所謂
----插件plugins----
uuid
npm install uuid --save-dev
生成唯一的id值
html-webpack-plugin
npm install html-webpack-plugin --save-dev
- 功能：幫助生成HTML文件
- 配置Configuration，可以進(jìn)行一系列的配置，支持如下的配置信息：
- title: 用來生成頁面的 title 元素
- filename: 輸出的 HTML 文件名，默認(rèn)是 index.html, 也可以直接配置帶有子目錄。
- template: 模板文件路徑，支持加載器，比如 html!./index.html
- inject: true | 'head' | 'body' | false ,注入所有的資源到特定的 template 或者 templateContent 中，如果設(shè)置為 true 或者 body，所有的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中。
- favicon: 添加特定的 favicon 路徑到輸出的 HTML 文件中。
- minify: {} | false , 傳遞 html-minifier 選項(xiàng)給 minify 輸出
- hash: true | false, 如果為 true, 將添加一個(gè)唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件，對(duì)于解除 cache 很有用。
- cache: true | false，如果為 true, 這是默認(rèn)值，僅僅在文件修改之后才會(huì)發(fā)布文件。
- showErrors: true | false, 如果為 true, 這是默認(rèn)值，錯(cuò)誤信息會(huì)寫入到 HTML 頁面中
- chunks: 允許只添加某些塊 (比如，僅僅 unit test 塊)
- chunksSortMode: 允許控制塊在添加到頁面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
- excludeChunks: 允許跳過某些塊，(比如，跳過單元測試的塊)
- 詳細(xì)請(qǐng)看具體內(nèi)容
extract-text-webpack-plugin
npm install extract-text-webpack-plugin --save-dev
獨(dú)立出css樣式
如果我們希望樣式通過 <link>引入，而不是放在 <style>標(biāo)簽內(nèi)，可以使用這個(gè)插件
babel-plugin-transform-do-expressions
npm install babel-plugin-transform-do-expressions --save-dev
使JSX可以使用
if-else表達(dá)式 ，例如：
{do {
if (loading) {
<Loading></Loading>
} else {
<Programa items={homePrograma}></Programa>
}
}}
要在根目錄下創(chuàng)建一個(gè) .babelrc 文件，文件里寫下面的內(nèi)容
{
"plugins": ["transform-do-expressions"]
}
open-browser-webpack-plugin
npm install open-browser-webpack-plugin --save-dev
Opens a new browser tab when Webpack loads.
在webpack-dev-server啟動(dòng)時(shí)，在瀏覽器自動(dòng)打開一個(gè)新的頁簽
