IT工程師數位筆記本

前言：拖了這么久，小菜鳥終于開始正式應用react，和es6來開發項目了。之前超喜歡同學的一個博客風格，這里貼一下地址：https://iwenku.net/,PC端是他很久之前做的，最近他重新做了一下移動端的。看完之后，我內心也勾勒出了一個自己的博客，所以開始正式搭建自己的博客作為項目練手吧。

關于react的虛擬DOM:

在前端開發的過程中，我們經常會做的一件事就是將變化的數據實時更新到UI上，這時就需要對DOM進行更新和重新渲染，而頻繁的DOM操作通常是性能瓶頸產生的原因之一，有時候我們會遇到這樣一種尷尬的情況：比如有一個列表數據，當用戶執行刷新操作時，Ajax會重新從后臺請求數據，即使新請求的數據和上次完全相同，DOM也會被全部更新一遍并進行重新渲染，這樣就產生了不必要的性能開銷。

React為此引入了虛擬DOM（Virtual DOM）機制：對于每一個組件，React會在內存中構建一個相對應的DOM樹，基于React開發時所有的DOM構造都是通過虛擬DOM進行，每當組件的狀態發生變化時，React都會重新構建整個DOM數據，然后將當前的整個DOM樹和上一次的DOM樹進行對比，得出DOM結構變化的部分(Patchs)，然后將這些Patchs 再更新到真實DOM中。整個過程都是在內存中進行，因此是非常高效的。

一，搭建環境

1,安裝node

第一步的話首先得確定安裝好了node的環境，這個毋庸置疑哈。國外的官網的話好像得FQ，方正我就在node中文網上下載的。(http://nodejs.cn/)安裝過程就不說了，方正這個步驟很簡單的。

2，初始化，生成package.json

npm init (基本直接按回車就可以了)

3,安裝webpack

先全局安裝：   npm install -g webpack

然后項目安裝 ： npm install  webpack --save-dev

3,安裝react

npm install react react-dom --save-dev

4,安裝babel

因為我們要用的是es2015，瀏覽器沒辦法直接識別，所以需要安裝babel插件,babel插件是webpack需要的加載器,如果沒有這幾個加載器我們的jsx語法，和es2015語法就會報錯。如果某些代碼需要調用Babel的API進行轉碼，就要使用babel-core模塊。

npm install babel-loader babel-core --save-dev

這里我們安裝的webpack1.x系列，安裝的時候要注意，webpack2.x會有變化。

因為ES6語法每年都在更新，因此，我們需要一定的規則去轉換。

npm install babel-preset-es2015 babel-preset-react --save-dev

5,安裝webpack-dev-server

Webpack給本地開發提供了一個可選的服務器webpack-dev-server。webpack-dev-server是一個很小的express應用，使用前需要用npm安裝。注意安裝的時候要和webpack的版本對應，不然就會報錯！

然后我們修改package.json的啟動處：

"scripts": {
    "dev": "webpack-dev-server --devtool --progress",
    "build": "webpack -p"
  }

6,安裝其他插件　　

• 安裝autoprefixer

　　　　這個插件可以自動補全瀏覽器前綴

　　　　npm install autoprefixer --save

• 安裝插件處理樣式表

　　　　npm install style-loader css-loader --save

　　　　css-loader使得你能使用類似@import url(...)的方法實現require()的功能。

　　　　style-loader將所有的計算后的樣式加入到頁面中。兩者組合就可以把樣式嵌入到webpack打包后的js文件中。

　　　　如果不想把css打包到腳本中，可用extract-text-webpack-plugin插件。

• 安裝jsx-loader

　　　　npm install jsx-loader --save

7,安裝完成后的package.json文件

{
  "name": "react-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool --progress",
    "build": "webpack -p"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/sprout-echo"
  },
  "author": "sprout",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.25.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^0.28.4",
    "jsx-loader": "^0.13.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^1.9.11",
    "webpack-dev-server": "^1.15.0"
  },
  "dependencies": {
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

8，新建一個文件 webpack.config.js

'use strict';
var path = require('path');
var webpack = require('webpack');
module.exports = {
  //為你的代碼創建源地址。當有任何報錯的時候可以讓你更加精確地定位到文件和行號
  devtool:'eval-source-map',
  entry:{
    main:'./src/entry.js'    //唯一入口文件
  },
  output:{
    path:'./build',     //打包后文件存放的地方
    filename:'main.js',   //打包后輸出文件的文件名
    publicPath:'http://localhost:8800/build'     //啟動本地服務后的根目錄
  },
  //服務器配置
  devServer:{
    port:8800,
    colors:true,  //終端中輸出結果為彩色
    historyApiFallback: true,  //不跳轉
    inline: true  //實時刷新
  },
  module:{
    //文件的加載器
    //url-loader用于在js中加載png/jpg格式的圖片文件，css/style loader用于加載css文件，less-loader加載器是將less編譯成css文件；
    loaders:[
      {test:/\.js?$/,loader:'jsx!babel',include:/src/},
      {test:/\.css$/,loader:['style-loader','css-loader']},
      {test:/\.(png|jpg)$/,loader:'url-loader?limit=819200'}
    ]
  },
  postcss: [
      require('autoprefixer')    //調用autoprefixer插件,css3自動補全
  ],
  //resolve：用于指明程序自動補全識別哪些后綴
  resolve:{
    extensions:['','.js','.json','coffee']
  }
}

具體的解釋都加了注釋，看了很多別人寫的，感覺不一樣的人有不一樣的寫法，所以具體的還是得自己看官網，自己來摸索。

9,項目啟動

可以用命令行來啟動

babel demo.js --presets es2015

但是每次啟動的時候都要加參數是很麻煩的，所以我們就要想想辦法。

在根目錄下新建一個.babelrc文件

（windows下不允許直接右鍵沒有文件名的文件，可以用cmd命令創建）

type nul>.babelrc

然后在文件中寫入：

{
  "presets":["es2015","react","stage-3"],
  "plugins":[]
}

除了上面的方法，也可以在package.json文件中進行配置，添加

“babel”:{
    "presets":["es2015","react","stage-3"]  
}

然后我們啟動項目的時候就可以直接輸入  webpack

                                                                 npm run dev

10,項目結構

最后貼一下目前的項目結構，還沒有搭建博客的具體內容

build中的文件是webpack打包后的腳本

src中存放的就是我們的源代碼，entry.js是入口文件，test.js是一個測試的react代碼

好啦！環境具體測試過，沒有任何問題，接下來就是投身于博客的具體開發啦