前端開(kāi)發(fā)規(guī)范-react/react-router/redux/webpack/es6開(kāi)發(fā)配置
項(xiàng)目地址： https://github.com/fangyongbao/react-router-redux-webpack
這里的webpack配置是針對(duì)多頁(yè)面開(kāi)發(fā)， 單頁(yè)面中進(jìn)行路由跳轉(zhuǎn)，這里需要5個(gè)相關(guān)配置文件：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">package.json 定義項(xiàng)目依賴模塊 以及 定義開(kāi)啟服務(wù)器和打包命令 helpers.js 獲取入口文件和html文件 webpack.base.config.js 定義webpack基礎(chǔ)配置 webpack.dev.config.js 定義webpack開(kāi)發(fā)配置 webpack.prod.config.js 定義webpack生產(chǎn)配置</pre>
改項(xiàng)目中包含了：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">路由跳轉(zhuǎn) 數(shù)據(jù)請(qǐng)求模塊封裝 webview與js交互模塊封裝 配置文件分離 自動(dòng)打包多個(gè)html文件 以一個(gè)簡(jiǎn)單的例子實(shí)現(xiàn) dispatch->action->reducer->state->view流程 定義共用sass文件 提取css
css自動(dòng)添加瀏覽器前綴 上線包添加靜態(tài)資源版本號(hào) 上線包c(diǎn)ss/js壓縮 定義第三方字體庫(kù)</pre>
使用方式：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">1.npm install webpack-dev-server -g 全局安裝服務(wù)器 2.到package.json所在目錄執(zhí)行npm install 安裝依賴模塊 3.npm run start 開(kāi)啟服務(wù)器(包含熱更新) 4.瀏覽器訪問(wèn)localhost:80 5.npm run build打包</pre>
webpack相關(guān)配置文件
package.json文件：
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> { "name": "pass", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --inline --hot --port 3000 --progress --profile --colors --watch --display-error-details --display-cached --config ./webpack.dev.config.js", "build": "webpack --progress --profile --colors --display-error-details --display-cached --bail --config ./webpack.prod.config.js" }, "author": "maicon", "license": "ISC", "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-react": "^6.0.0", "copy-webpack-plugin": "^3.0.1", "css-loader": "^0.23.0", "express": "^4.13.3", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "glob": "^7.0.6", "html-webpack-plugin": "^2.8.1", "json-loader": "^0.5.4", "node-sass": "^3.8.0", "sass-loader": "^4.0.0", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.12.2" }, "dependencies": { "babel-polyfill": "^6.13.0", "es6-promise": "^3.2.1", "jquery": "^3.1.0", "md5": "^2.2.1", "react": "^15.3.0", "react-dom": "^15.3.0", "react-redux": "^4.4.5", "react-router": "^2.7.0", "redux": "^3.5.2", "redux-thunk": "^2.1.0" } }</pre>
helpers.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var glob = require('glob'); var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); function getHtmlPlugin() { var buildPath = ''; var plugins = []; glob.sync('./.html').forEach(function (name) { //[^/]不匹配這個(gè)集合中的任何一個(gè)字符 var n = name.match(/([^/]+).html/)[1]; plugins.push( new HtmlWebpackPlugin({ filename:buildPath+n+'.html', template:name, inject:false }) ) }); return plugins; } function getEntry() { var entry = {}; glob.sync('./entry/.js').forEach(function (name) { console.log(name); //[^/]不匹配這個(gè)集合中的任何一個(gè)字符 var n = name.match(/([^/]+).js/)[1]; entry[n] = name; }); return entry; }; exports.getHtmlPlugin = getHtmlPlugin; exports.getEntry = getEntry;</pre>
webpack.base.config.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var path = require('path'); var webpack = require('webpack'); var helpers = require('./helpers'); module.exports = { //入口文件 entry: helpers.getEntry(), //輸出文件 output: { path: path.join(__dirname, '/dist'), //熱更新資源存放目錄 //publicPath:'/', filename: 'js/[name].js', }, resolve: { //定義模塊縮寫(xiě)名稱 alias: { 'common.scss':path.join(__dirname,'/src/assets/scss/common.scss') }, //resolve 指定可以被 import 的文件后綴 extensions: ['', '.js', '.css', '.scss'] }, module: { //加載器配置 loaders: [ { test:/.js?$/, loader:'babel-loader', exclude: /node_modules/, query:{ presets:['es2015','react'] } }, { test: /.scss/, loader: 'style-loader!css-loader!sass-loader' }, { test: /.css$/, loader: 'style-loader!css-loader' }, { test: /.(jpe?g|png|gif|svg)$/i, loader: 'url-loader?limit=1000&name=images/[name].[ext]', query:{} }, { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: 'fonts/[name].[ext]' } } ] }, //插件項(xiàng) plugins: [ ] }</pre>
webpack.dev.config.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> var path = require('path'); var webpack = require('webpack'); var helpers = require('./helpers'); var commonWebpack = require('./webpack.base.config'); //var CopyWebpackPlugin = require('copy-webpack-plugin'); const METADATA = { host: '.' }; module.exports = Object.assign({}, commonWebpack, { //供html使用的變量 metadata: METADATA, //開(kāi)發(fā)環(huán)境設(shè)定獨(dú)立的插件 plugins: [ //commonsPlugin 可以用于分析模塊的共用代碼, 單獨(dú)打一個(gè)包出來(lái) new webpack.optimize.CommonsChunkPlugin('js/common.js'), //代碼熱替換 new webpack.HotModuleReplacementPlugin(), //將圖片拷貝到指定位置 // new CopyWebpackPlugin([{ // from: 'src/assets/images', // to: 'images' // }]), //React 官方提供的代碼是已經(jīng)合并的, 這個(gè)是 Webpack 不推薦的用法, //在合并話的代碼上進(jìn)行定制有點(diǎn)麻煩, Webpack 提供了設(shè)置環(huán)境變量來(lái)優(yōu)化代碼的方案: new webpack.DefinePlugin({ //配置組件中使用的變量,組件中可以直接使用{metadata.host} metadata:JSON.stringify(METADATA), "process.env": { NODE_ENV: JSON.stringify("production") } }) //concat進(jìn)行數(shù)組合并 ].concat(helpers.getHtmlPlugin()) }); </pre>
webpack.prod.config.js文件
<pre class="prettyprint" style="padding: 8px; color: rgb(68, 68, 68); border-radius: 2px; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; display: block; margin: 0px 0px 20px; font-size: 14px; line-height: 20px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(248, 248, 248); border: 1px solid rgb(238, 238, 238); overflow: hidden; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var path = require('path'); var webpack = require('webpack'); var helpers = require('./helpers'); var commonWebpack = require('./webpack.base.config'); var ExtractTextPlugin = require('extract-text-webpack-plugin') //var CopyWebpackPlugin = require('copy-webpack-plugin'); const METADATA = { host: '.' }; module.exports = Object.assign({}, commonWebpack, { //供html使用的變量 metadata: METADATA, plugins: [ //commonsPlugin 可以用于分析模塊的共用代碼, 單獨(dú)打一個(gè)包出來(lái) new webpack.optimize.CommonsChunkPlugin('js/common.js'), new webpack.HotModuleReplacementPlugin(), //將圖片拷貝到指定位置 // new CopyWebpackPlugin([{ // from: 'src/assets/images', // to: 'images' // }]), // 提取css為單文件 //new ExtractTextPlugin("css/[name].css"), //壓縮js代碼 new webpack.optimize.UglifyJsPlugin({ output: { comments: false }, compress: { warnings: false } }), //React 官方提供的代碼是已經(jīng)合并的, 這個(gè)是 Webpack 不推薦的用法, //在合并話的代碼上進(jìn)行定制有點(diǎn)麻煩, Webpack 提供了設(shè)置環(huán)境變量來(lái)優(yōu)化代碼的方案: new webpack.DefinePlugin({ //配置組件中使用的變量,組件中可以直接使用{metadata.host} metadata:JSON.stringify(METADATA), "process.env": { NODE_ENV: JSON.stringify("production") } }) //concat進(jìn)行數(shù)組合并 ].concat(helpers.getHtmlPlugin()) });</pre>
1.預(yù)備知識(shí)
這個(gè)課程的內(nèi)容是用
React寫(xiě)一個(gè)新聞網(wǎng)頁(yè)，我們用npm來(lái)管理項(xiàng)目，且使用webpack模塊打包機(jī)進(jìn)行打包。
1.1 關(guān)于npm
npm通常稱為node包管理器。顧名思義，它的主要功能就是管理node包，包括：安裝、卸載、更新、查看、搜索、發(fā)布等；
在進(jìn)行此項(xiàng)目之前，我有一定的npm基礎(chǔ)，所以在做項(xiàng)目的過(guò)程中，沒(méi)有遇到太多問(wèn)題。想了解npm的小伙伴可以參考下面兩篇文章：
主要回顧一下npm配置國(guó)內(nèi)資源
npm是一個(gè)非常大的JavaScript包，但是在國(guó)外，所以由于網(wǎng)速的原因，我們使用npm進(jìn)行安裝的時(shí)候，有時(shí)會(huì)失敗。
還好，淘寶做了一個(gè)npm的國(guó)內(nèi)鏡像。我們安裝之后，使用cnpm install [xxx] 命令使用淘寶的鏡像進(jìn)行安裝了。cnpm的安裝和使用淘寶 NPM 鏡像說(shuō)的很清晰。
另一種方式是直接修改npm的配置項(xiàng)register，將npm所在的位置修改為淘寶的地址，Mac 的做法如下：在命令行中輸入如下命令
cd ~ //進(jìn)入根目錄
atom .npmrc //用atom打開(kāi).npmrc文件
將.npmrc文件中的內(nèi)容修改如下：
registry = https://registry.npm.taobao.org
這樣我們使用 npm install [xxx] 就是從淘寶鏡像進(jìn)行安裝了。
注：關(guān)于npm配置國(guó)內(nèi)資源，慕課老師寫(xiě)了一篇文章，講的很是明白使用 CNPM 進(jìn)行 Ionic 環(huán)境的安裝與配置
1.2 關(guān)于webpack
webpack是一個(gè)強(qiáng)大的模塊打包機(jī)，本項(xiàng)目中使用了React和ES6的語(yǔ)法，所以使用webpack是非常合適的呢！
webpack的內(nèi)容還是很多的，比如說(shuō)配置文件webpack.config.js、loader的配置等等；我在學(xué)習(xí)webpack的過(guò)程中，還是花了很多力氣的。想學(xué)習(xí)webpack的小伙伴，我推薦下面這篇文章（真心講的很好）：
我們主要說(shuō)說(shuō)webpack的熱加載的配置，這個(gè)功能真的很好用。
常規(guī)情況下，我們配置好
webpack.config.js文件之后，使用webpack命令進(jìn)行打包，然后手動(dòng)刷新頁(yè)面。就是說(shuō)，我們?cè)诰帉?xiě)代碼的過(guò)程中，要不斷的執(zhí)行webpack命令，再手動(dòng)刷新，才能看到效果。還有一種厲害一點(diǎn)的方法，
webpack --watch命令來(lái)動(dòng)態(tài)監(jiān)聽(tīng)文件的改變并實(shí)時(shí)打包，輸出新 bundle.js 文件，但是還是要我們手動(dòng)進(jìn)行刷新。-
最厲害的就是熱加載，
webpack-dev-server主要是啟動(dòng)了一個(gè)使用express的Http服務(wù)器 。它的作用主要是用來(lái)伺服資源文件 。此外這個(gè)Http服務(wù)器 和client使用了websocket通訊協(xié)議，原始文件作出改動(dòng)后，webpack-dev-server會(huì)實(shí)時(shí)的編譯，但是最后的編譯的文件并沒(méi)有輸出到目標(biāo)文件夾，實(shí)時(shí)編譯后的文件都保存到了內(nèi)存當(dāng)中。因此使用webpack-dev-server進(jìn)行開(kāi)發(fā)的時(shí)候都看不到編譯后的文件。首先安裝
npm install webpack-dev-server終端輸入命令
webpack-dev-server --inline
這樣我們?cè)跒g覽器輸入 http://localhost:8080/ 就能看到我們編寫(xiě)的頁(yè)面了，并能時(shí)時(shí)刷新。
需要注意的是：
webpack-dev-server并不能讀取你的webpack.config.js的配置output，你在webpack.config.js里面的配置output屬性是你用webpack打包時(shí)候才起作用的，對(duì)webpack-dev-server并不起作用webpack-dev-server打包生產(chǎn)的文件并不會(huì)添加在你的項(xiàng)目目錄中。你啟動(dòng)webpack-dev-server后，你在目標(biāo)文件夾中是看不到編譯后的文件的,實(shí)時(shí)編譯后的文件都保存到了內(nèi)存當(dāng)中，它默認(rèn)打包的文件名是bundle.js。-
因此在使用熱加載時(shí)，我們引入的文件應(yīng)該是
webpack-dev-server打包生產(chǎn)的文件(引用bundle.js文件需要直接引用根目錄下面的！)<script type="text/javascript" src="bundle.js"></script>這樣就能享受時(shí)時(shí)刷新的待遇啦！
2.框架
項(xiàng)目中使用AntDesign框架來(lái)書(shū)寫(xiě)樣式，AntDesign框架的很多組件很好用，比如：Tabs、Form、Carousel、Modal、Menu、Button等；
AntDesign的 官網(wǎng) 是中文的，學(xué)習(xí)起來(lái)容易一些呢！
React項(xiàng)目的重點(diǎn)當(dāng)然是React了，React的核心思想是數(shù)據(jù)驅(qū)動(dòng)，我們從后臺(tái)取到數(shù)據(jù)，再將取到的數(shù)據(jù)用 this.setState()進(jìn)行保存，從而導(dǎo)致頁(yè)面重新render。關(guān)于React我也在學(xué)習(xí)的過(guò)程中，下面的三篇文獻(xiàn)是我最近正在學(xué)習(xí)的：
阮一峰大神曾說(shuō)過(guò)：真正學(xué)會(huì) React 是一個(gè)漫長(zhǎng)的過(guò)程。
