React 搭建PC 開發環境
第一步：
安裝node.js
第二步
安裝webpack
npm install webpack -g
第三步建立專案 1.建立一個根目錄，目錄名為react-webpack-master,執行命令
cd react-webpack-master/ 切換到該目錄下
2.使用 npm init 初始化，生成 package.json 檔案：執行命令:
npm init 自定義建立package.json
npm init -yes 可以建立預設的package.json
3.現在我們的專案已經建立好了,接下來我們來新增依賴包及外掛 (1)區域性安裝Webpack,執行命令：
npm install webpack --save-dev
(2)安裝React,–save 命令用於將包新增至 package.json 檔案,執行命令:
npm install react react-dom --save-dev
(3)安裝babel外掛,babel外掛是webpack需要的載入器,如果沒有這幾個載入器我們的jsx語法，和es2015語法就會報錯。
npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev
webpack.config.js配置:
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' }, devServer: { inline: true, port: 8181 }, module: { loaders: [ { test: /\.js?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ] };
-
entry: 指定打包的入口檔案 main.js。
-
output：配置打包結果，path定義了輸出的資料夾，filename則定義了打包結果檔案的名稱。
-
devServer：設定伺服器埠號為 8181，埠後你可以自己設定 。
-
module：定義了對模組的處理邏輯，這裡可以用loaders定義了一系列的載入器，以及一些正則。當需要載入的檔案匹配test的正則時，就會呼叫後面的loader對檔案進行處理，這正是webpack強大的原因。
-
webpack-dev-server允許我們可以把本地專案跑在像nginx那樣的web伺服器上，更重要的是我們可以在package.json檔案內定義scripts，同時修改webpack的配置檔案來達到自動重新整理的效果。
安裝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"
}
這裡的命令是webpack,如果需要壓縮編譯的話,將webpack改成webpack -p
最終package.json檔案如下
{
"name": "react",
"version": "1.0.0",
"description": "react-webpack-stu",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
這裡有一點提醒大家，package.json中name不能跟我們的模組和專案檔案目錄同名 專案程式碼編寫：
1.index.html程式碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Test</title>
</head>
<body>
<script src="http://localhost:8181/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>
2.main.js程式碼
let React = require('react');
let ReactDOM = require('react-dom');
let AppComponent = require('./components/Tab1');
ReactDOM.render(<AppComponent />, document.getElementById('content'));
3.Tab1.js程式碼
var React = require('react');
var Tab1= React.createClass({
render: function () {
return (
<div>
React+Webpack+ES6從環境搭建到HelloWorld
</div>
);
}
});
module.exports = Tab1;
程式碼編譯結束:
1.根目錄下執行命令
npm run dev
2.瀏覽器直接訪問:
http://localhost:8181/index.html