React js是由Facebook所開發並應用的前端框架，與Angular, vue素有三大框架的稱號。
本文簡述如何快速使用webpack, npm建置react開發環境。
準備 – Node.js
確認系統已安裝node js，安裝下載連結：
https://nodejs.org/zh-tw/download/
安裝完之後執行以下指令查看版本：
|
1 |
npm -v |
題外話介紹 – CDN-based react
小型專案我們可以使用CDN-based的方式，在HTML <head>引入script src就能快速使用react。
|
1 2 3 4 5 |
<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解析。
|
1 2 3 4 5 6 7 8 9 |
<body> <div id='exp'></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('exp') ); </script> </body> |
不過本篇文章討論的不是小型專案，所以不使用CDN-based方法，讓我們開始正文吧。
Step1: 安裝Webpack
在terminal執行指令
|
1 |
npm install webpack -g |
查看webpack版本
|
1 |
webpack -v |
畫面會詢問是要安裝webpack-command還是webpack-cli，我們要的是cli，所以先[ctrl+c]回到全域路徑（不要在你的專案資料夾）。執行以下指令
|
1 |
npm install webpack-cli -g |
再查看一次版本
|
1 |
webpack -v |
確認無誤後往下一步邁進。
Step2: webpack安裝設定
請先建立你的專案資料夾
|
1 |
mkdir helloworld |
進入你的資料夾
|
1 |
cd helloworld |
建立npm project
|
1 |
npm init |
新增專案會需要設定以下內容：
- package name: 預設資料夾名稱
- version: 預設為1.0.01
- description: 專案敘述，可為空
- entry point: 專案執行時預設載入之程式，預設為index.js
- test command: 可設定指令並執行，可為空
- git repositoty: 可使用Git控管，可為空
- keywords: 專案關鍵字，可為空
- author: 專案作者，可為空
- license: 專案版權聲明，預設為ISC
安裝webpack，請執行以下指令：
|
1 |
npm install webpack --save-dev |
|
1 |
npm install webpack-cli -dev |
一些Webpack常用指令
- webpack：會在開發模式下開始一次性的建置
- webpack -p：會建置 production 的程式碼
- webpack –watch：會監聽程式碼的修改，當儲存時有異動時會更新檔案
- webpack -d：加入 source maps 檔案
- webpack –progress –colors：加上處理進度與顏色
建立一個index.js
|
1 |
console.log('Hello world!'); |
webpack.config.js 內容設定
|
1 2 3 4 5 6 7 8 9 10 |
const path = require('path'); module.exports = { entry: { index: './index.js' }, output: { filename: 'bundle.js', path: path.resolve('./'), } }; |
使用webpack打包
|
1 |
webpack -p |
建立一份HTML – index.html
|
1 2 3 4 5 6 7 8 9 |
<html> <head> </head> <body> My webpack <div id="root"></div> <script src="bundle.js"></script> </body> </html> |
到這邊就能開啟index.html查看網站。
Step3: 下載React
指令如下：
|
1 2 |
npm install react --save npm install react-dom --save |
說到react當然少不了jsx語法糖，我們先建立一份jsx檔案 – app.jsx
|
1 2 3 4 5 6 7 8 9 |
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，執行以下指令：
|
1 |
npm install babel-loader --save-dev |
|
1 |
npm install @babel/core --save-dev |
|
1 |
npm install @babel/preset-react --save-dev |
下方是用來編譯ES6的loader
|
1 |
npm install @babel/preset-env --save-dev |
修改 webpack.config.js 設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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'] } } } ] } }; |
解釋一下上方的rules內容：
- test: 指定編譯檔案的副檔名
- exclude: 指定不編譯的路徑
- use: 指定用來編譯副檔名的loader，[loader]指定進行編譯之套件，[options]指定loader套件之presets
另外我們還需要編譯ES6的loader：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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打包
|
1 |
webpack -p |
Step4: Localhost server
為了讓開發環境更友善我們需要一個本地伺服器輔佐開發，安裝指令：
|
1 |
npm install webpack-dev-server --save-dev |
在webpack.config.js增加server port
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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
|
1 |
webpack-dev-server |
瀏覽器輸入localhost:9000或127.0.0.1:9000就能看到你的網站了
ps.我們可以在package.json加入scripts簡化啟動server指令
|
1 2 3 |
"scripts": { "open": "webpack-dev-server" }, |
加入後，以後啟動server只需要輸入以下指令即可啟動：
|
1 |
npm run open |
使用webpack-dev-server的好處在於修改檔案後只需要儲存即可看到更動內容，無需重新webpack打包。
留言