React js是由Facebook所開發並應用的前端框架，與Angular, vue素有三大框架的稱號。
本文簡述如何快速使用webpack, npm建置react開發環境。
確認系統已安裝node js，安裝下載連結：
https://nodejs.org/zh-tw/download/
安裝完之後執行以下指令查看版本：
npm -v小型專案我們可以使用CDN-based的方式，在HTML <head>引入script src就能快速使用react。
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>在HTML <body>中就能使用<script>寫react程式，這邊使用babel解析。
<body>
<div id='exp'></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('exp')
);
</script>
</body>不過本篇文章討論的不是小型專案，所以不使用CDN-based方法，讓我們開始正文吧。
在terminal執行指令
npm install webpack -g查看webpack版本
webpack -v畫面會詢問是要安裝webpack-command還是webpack-cli，我們要的是cli，所以先[ctrl+c]回到全域路徑（不要在你的專案資料夾）。執行以下指令
npm install webpack-cli -g再查看一次版本
webpack -v確認無誤後往下一步邁進。
請先建立你的專案資料夾
mkdir helloworld進入你的資料夾
cd helloworld建立npm project
npm init新增專案會需要設定以下內容：
安裝webpack，請執行以下指令：
npm install webpack --save-devnpm install webpack-cli -devconsole.log('Hello world!');const path = require('path');
module.exports = {
entry: {
index: './index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve('./'),
}
};使用webpack打包
webpack -p<html>
<head>
</head>
<body>
My webpack
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>到這邊就能開啟index.html查看網站。
指令如下：
npm install react --save
npm install react-dom --save說到react當然少不了jsx語法糖，我們先建立一份jsx檔案 – app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
let element = <h1>Hello, world!</h1>
ReactDOM.render(
element,
document.getElementById('root')
);還記得我們剛剛的index.html檔案嗎？
上面的ReactDOM.render會找到ID為root的component並將element插入。
為了要讓我們的瀏覽器搞懂jsx語法，我們要使用Babel，執行以下指令：
npm install babel-loader --save-devnpm install @babel/core --save-devnpm install @babel/preset-react --save-dev下方是用來編譯ES6的loader
npm install @babel/preset-env --save-devconst path = require('path');
module.exports = {
entry: ['./index.js', './app.jsx'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './'),
},
module: {
rules: [
{ test: /.jsx$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } }
]
}
};解釋一下上方的rules內容：
另外我們還需要編譯ES6的loader：
const path = require('path');
module.exports = {
entry: ['./index.js', './app.jsx'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './'),
},
module: {
rules: [
{ test: /.jsx$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react','@babel/preset-env'] } } },
//2nd loader compile ES6
{ test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }
]
}
};webpack打包
webpack -p為了讓開發環境更友善我們需要一個本地伺服器輔佐開發，安裝指令：
npm install webpack-dev-server --save-dev在webpack.config.js增加server port
const path = require('path');
module.exports = {
entry: ['./index.js', './app.jsx'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './'),
},
module: {
rules: [
{ test: /.jsx$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'] } } },
{ test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }
]
},
devServer: {
port: 9000
}
};執行server
webpack-dev-server瀏覽器輸入localhost:9000或127.0.0.1:9000就能看到你的網站了
ps.我們可以在package.json加入scripts簡化啟動server指令
"scripts": {
"open": "webpack-dev-server"
},加入後，以後啟動server只需要輸入以下指令即可啟動：
npm run open使用webpack-dev-server的好處在於修改檔案後只需要儲存即可看到更動內容，無需重新webpack打包。