react+es6+webpack環境搭建以及項目入門

標籤：nod   就會   寫法   檔案名稱   round   git   eval   命令   nodejs   

 

前言：拖了這麼久，小菜鳥終於開始正式應用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

　　　　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代碼

好啦！環境具體測試過，沒有任何問題，接下來就是投身於部落格的具體開發啦

 

react+es6+webpack環境搭建以及項目入門