react+es6+webpack環境搭建以及項目入門
前言：拖了這麽久，小菜鳥終於開始正式應用react，和es6來開發項目了。之前超喜歡同學的一個博客風格，這裏貼一下地址：https://iwenku.net/,PC端是他很久之前做的，最近他重新做了一下移動端的。看完之後，我內心也勾勒出了一個自己的博客，所以開始正式搭建自己的博客作為項目練手吧。
一，搭建環境
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
[email protected] 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代碼
好啦！環境具體測試過，沒有任何問題，接下來就是投身於博客的具體開發啦
react+es6+webpack環境搭建以及項目入門