frontend

React js是由Facebook所開發並應用的前端框架，與Angular, vue素有三大框架的稱號。本文簡述如何快速使用webpack, npm建置react開發環境。 準備 - Node.js 確認系統已安裝node js，安裝下載連結：https://nodejs.org/zh-tw/download/ 安裝完之後執行以下指令查看版本： npm -v 題外話介紹 - CDN-based react 小型專案我們可以使用CDN-based的方式，在HTML 引入script src就能快速使用react。 在HTML 中就能使用 寫react程式，這邊使用babel解析。 ReactDOM.render( Hello, world! , document.getElementById('exp') ); 不過本篇文章討論的不是小型專案，所以不使用CDN-based方法，讓我們開始正文吧。 Step1: 安裝Webpack 在terminal執行指令 npm install webpack -g 查看webpack版本 webpack -v 畫面會詢問是要安裝webpack-command還是webpack-cli，我們要的是cli，所以先回到全域路徑（不要在你的專案資料夾）。執行以下指令 npm install webpack-cli -g 再查看一次版本 webpack -v 確認無誤後往下一步邁進。 Step2: webpack安裝設定 請先建立你的專案資料夾 mkdir helloworld 進入你的資料夾 cd helloworld 建立npm project npm init 新增專案會需要設定以下內容： package name: 預設資料夾名稱version: 預設為1.0.01description: 專案敘述，可為空entry point: 專案執行時預設載入之程式，預設為index.jstest command: 可設定指令並執行，可為空git repositoty: 可使用Git控管，可為空keywords: 專案關鍵字，可為空author: 專案作者，可為空license: 專案版權聲明，預設為ISC 安裝webpack，請執行以下指令： npm install webpack --save-dev npm install webpack-cli -dev 一些Webpack常用指令 webpack：會在開發模式下開始一次性的建置webpack -p：會建置 production 的程式碼webpack --watch：會監聽程式碼的修改，當儲存時有異動時會更新檔案webpack -d：加入 source maps 檔案webpack --progress --colors：加上處理進度與顏色 建立一個index.js console.log('Hello world!'); webpack.config.js 內容設定 const path require('path'); module.exports { entry: { index: './index.js' }, output: { filename: 'bundle.js', path: path.resolve('./'), } }; 使用webpack打包 webpack -p 建立一份HTML - index.html My webpack 到這邊就能開啟index.html查看網站。 Step3: 下載React 指令如下： 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 Hello, world! ReactDOM.render( element, document.getElementById('root') ); 還記得我們剛剛的index.html檔案嗎？ 上面的ReactDOM.render會找到ID為root的component並將element插入。 為了要讓我們的瀏覽器搞懂jsx語法，我們要使用Babel，執行以下指令： npm install babel-loader --save-dev npm install @babel/core --save-dev npm install @babel/preset-react --save-dev 下方是用來編譯ES6的loader npm install @babel/preset-env --save-dev 修改 webpack.config.js 設定 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套件之presets 另外我們還需要編譯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 Step4: Localhost server 為了讓開發環境更友善我們需要一個本地伺服器輔佐開發，安裝指令： 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打包。

frontend

[ReactJS] 使用Webpack, npm建置React開發環境

Headline