webpack+react+es2015輕鬆環境搭建,配置,執行專案
阿新 • • 發佈:2019-01-07
簡介:
webpack:是近期最火的一款模組載入器兼打包工具,它能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作為模組來使用和處理。
react:現在最熱門的前端框架,毫無疑問是 React 。
es2015:ECMAScript 6。
以上是她們的基本定義,想想能將她們結合在一起開發我們的專案是多麼的激動人心啊。當然在正式開發之前我們也有很多準備工作需要做好,這也可能是對新手最棘手的問題。下面我們就直接進入正題吧。
環境搭建:
-
首選我們需下載安裝Node.js,下載地址:https://nodejs.org/en/ (注意:為了能支援es2015請下載4.0以上版本)
-
安裝了node之後我們還需要npm也就是包管理器,當然新的node已經集成了npm的。所以此步驟可以跳過了
-
有了npm後,win+r然後輸入cmd開啟,然後輸入命令:
-
npm install webpack -g
執行命令後我的webpack就全域性安裝好了,這裡提醒一下,在專案檔案中我們還需要將webpack寫入package.json(區域性安裝)
專案建立:
-
在D盤建立我們的專案檔案“reactPro”,目錄結構如下:
-
在cmd中定位專案地址,執行命令:
-
cd D:\reactPro
-
D:
定位完成後,我們利用npm生成package.json檔案,執行命令:
-
npm init
-
上面命令執行完成之後我們就生成了一個node專案,接下來就可以安裝我們的node模組了
首選安裝webpack,執行命令:
-
npm install webpack --save-dev
然後安裝webpack需要的載入器,執行命令:
-
npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev
- 載入器這裡應該是很重要的一步了,如果沒有這幾個載入器我們的jsx語法,和es2015語法就會報錯(ps:網上很多教程都沒有重點提及這幾個載入器)
- 好了有了這幾個重要的載入器來編譯我們的程式碼之後,我們還要安裝react模組,這樣才能開發我們react應用。安裝react輸入如下命令:
-
npm install react react-dom --save-dev
檔案配置&執行:
- 前面我們已經建立好了我們的專案檔案也安裝完了必要的模組,環境已經搭建好了,現在就是萬事具備只欠東風啦。
- 接下來,我們開始配置webpack開發的webpack.config.js檔案配置,通過配置這個檔案我們告訴webpack如何編譯我們的程式碼,話不多說直接上程式碼:
-
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')], output: { path: path.resolve(__dirname, './build'), filename: 'bundle.js' }, module: { loaders: [ { test: /\.js?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ] };
- 大家可能發現了‘webpack/hot/dev-server‘這句話,沒錯這就是我們的webpack-dev-server,她允許我們可以把本地專案跑在像nginx那樣的web伺服器上,更重要的是我們可以在package.json檔案內定義scripts,同時修改webpack的配置檔案來達到類似BrowserSync(即檔案修改能被監聽,並自動重新整理瀏覽器)的效果!
- 安裝webpack-dev-server執行:
-
npm install webpack-dev-server --save-dev
- 在package.json檔案中為scripts新增:
-
"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }
- 最後我們的package.json程式碼是這樣的:
{ "name": "reactpro1", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "bundle": "babel-node tools/run bundle", "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }, "author": "jx", "license": "ISC", "devDependencies": { "babel-core": "^6.8.0", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "react": "^15.0.2", "react-dom": "^15.1.0", "webpack": "^1.13.0", "webpack-dev-server": "^1.14.1" }, "dependencies": { "webpack": "^1.13.0", "webpack-dev-server": "^1.14.1" }, "description": "" }
- 這裡有一點提醒大家,package.json中name不能跟我們的模組和專案檔案目錄同名
- index.html變成這樣:
-
<!DOCTYPE html> <html> <headlang="en"> <metacharset="UTF-8"> <title>React Project</title> </head> <body> <scriptsrc="http://localhost:8080/webpack-dev-server.js"></script> <divid="content"></div> <scriptsrc="./bundle.js"></script> </body> </html>
- 最後我們這樣執行(ps:這一步可以先跳過,寫完我們的專案程式碼後再來執行):
-
npm run dev
react&es2015程式碼編寫:
- 所有東西都齊全了,現在我們就可以開始我們的愉悅的程式碼編寫了
- 根據webpack.config.js的配置結合我們的檔案目錄結構,首先是main.js:
-
let React = require('react'); let ReactDOM = require('react-dom'); let AppComponent = require('./components/productBox.js'); ReactDOM.render(<AppComponent />, document.getElementById('content'));
- 這裡的let就是es2015的東西了,關於更多的如class,module之類的語法可以去這個網站學習,地址:http://es6.ruanyifeng.com/#README
- 在main.js裡我們引入了'./components/productBox.js'這個模組,productBox.js程式碼如下:
-
var React = require('react'); var ProductBox; ProductBox = React.createClass({ render: function () { return ( <divclassName="productBox"> hello react&es2015&webpack! </div> ); } }); module.exports = ProductBox;
- 到這裡,簡單的功能程式碼就完成了,當執行專案後根據webpack.config.js的配置回來build目錄下生成bundlie.js檔案,我們只需要在build目錄下的index.html檔案中引入bundle.js就完成我們的整個專案測試程式碼了.index.html如下:
-
<!DOCTYPE html> <html> <headlang="en"> <metacharset="UTF-8"> <title>React Project</title> </head> <body> <scriptsrc="http://localhost:8080/webpack-dev-server.js"></script> <divid="content"></div> <scriptsrc="./bundle.js"></script> </body> </html>
- 程式碼開發完成後就要執行我們的專案了,在cmd中執行:
-
npm run dev
- 等待編譯完成,開啟瀏覽器輸入http://localhost:8080/index.html
- 至此我們的測試專案大功告成!