iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0

React工具包

常常在做環境建置的工作的時候
我們都只有乖乖的跟著教學走
其實常常很好奇到底裝的都是些什麼然後能幹嘛
但始終都被龐大數量的指令搞得頭昏腦脹而沒有真的去探究
難得有這個機會
這次我就來滿足自己長年以來的好奇心
所以!!!

本篇目標為:了解開發環境所需要的一些基本插件及安裝方式

要建置ReactJS的開發環境
我們會需要:

  1. NodeJS & npm
  2. Webpack bundler
  3. Babel plugins
  4. React & React Dom

下面讓我們逐一介紹每一項工具以及它的安裝方式

NodeJS & NPM

https://ithelp.ithome.com.tw/upload/images/20171222/20107674ZCfXChpovG.png
NodeJS 是一套開源伺服器框架(server framework)
透過 V8 執行 JavaScript 程式碼
且具有跨平台的特性
提供在伺服器端使用 JavaScript 編寫程式的功能

https://ithelp.ithome.com.tw/upload/images/20171222/20107674Ycm9bG6XC8.png
NPM (Node Package Manager)
是一套由 JavaScript 寫成的軟體套件管理系統
為 NodeJS 預設的使用模組
使用者可以透過 npm 指令來安裝/管理/維護/發布模組

安裝方式

至 NodeJS 官網
根據作業系統下載對應的壓縮檔
下載完成之後解壓縮執行node.exe進行安裝
npm 會隨著 NodeJS 一同安裝完成

由於他們是所有套件(package)的管理者
所以安裝完 npm 後
要建立一個接下來工作區域的資料夾(根目錄位置)
然後開啟 CMD(命令提示字元)或 Terminal 先下一個指令:

  • npm init

這個指令主要是創建 package.json 檔案
紀錄應用程式所需要的套件
需要注意的是
一定要先建立這個檔案
後面下安裝指令才能夠同時設定好依賴(dependencies)屬性
執行的時候系統才找的到這些資源喔

Webpack

https://ithelp.ithome.com.tw/upload/images/20171222/201076744YYshoWEJ8.png
是一套前端打包工具
提供模組化的開發方式
主要功能是將靜態資源打包成優化後的程式碼
(例如將擴充語法轉換成最基本的JS語法)
使用前必須先安裝 NodeJS
可透過指令或修改 config 檔實現各種功能

安裝方式

於 CMD 或 Terminal 中
透過 npm 指令安裝 webpack 以及 webpack-dev-server
輸入指令:

  • npm install webpack --save
  • npm install webpack-dev-server -g--save

指令裡的參數:
--save 是在安裝的同時要求將模組名稱及版本自動加入到 package.json 中的 dependencies 參數中
-g 則是將 package 安裝為全域(global)的狀態

如果沒辦法使用這些指令
可能是因為 環境變數 沒有設定好
可以將執行目錄切換到 npm 的所在位置執行或者至系統環境變數中加上 npm 的路徑

使用方式

於 CMD 或 Terminal 中
切換至 webpack.config.js 存放的目錄位置
輸入指令:

  • webpack
    在開發模式執行一次建置
  • webpack -p
    建置 production-ready 的程式碼
  • webpack --watch
    (推推)在開發模式下每當程式碼有更動時自動更新裝置
  • webpack -d
    產生 source maps 檔案

Babel

https://ithelp.ithome.com.tw/upload/images/20171222/20107674bnTok6gcbi.png
Babel 是一套 JavaScript 的編譯器(compiler)
協助將 ES6+ 語法轉換成目前瀏覽器支援度較高的 ES5 語法
避免使用者瀏覽器無法正常顯示的問題產生

安裝方式

於 CMD 或 Terminal 中
透過npm安裝Bable本體和擴充元件
輸入指令:

  • npm install -g babel

  • npm install -g babel-cli

  • npm install babel-core

  • npm install babel-loader

  • npm install babel-preset-react

  • npm install babel-preset-es2015

React & React Dom

要寫 React 的程式
當然要安裝他的本體
ReactDom 則是 React 使用的虛擬 DOM(Virtual DOM)
是 React 在渲染(render)時所要使用到的東西

安裝方式

於 CMD 或 Terminal 中
透過 npm 安裝 React 的擴充元件

輸入指令:

  • npm install react --save
  • npm install react-dom --save

好的
看到這邊相信大家都累了
真的是辛苦了

這篇已經將需要事先安裝的工具都交代完畢了
下一篇就可以直接來測試環境囉!
大家可以先讓眼睛休息一下
保養一下視網膜哈哈
我們下篇待續...

名詞註記

  • V8
    由Google所開發的開源JavaScript引擎,會先將JavaScript程式碼編譯成機器碼再執行,以提升程式運行效能。
  • Source Map
    原始碼映射資料表,紀錄「用於執行的程式碼」與「當初撰寫的程式碼」內容對應資料的檔案,可以提升除錯(debug)時的速度及效率。
  • ES5、ES6+
    為JavaScript語法版本名稱,瀏覽器目前對ES6+( ES6、ES7等等較新版本的合稱 )的支援性相比較低。
    *Loader
    載入器、加載器或稱作載入程式,是作業系統的一部分,如同名稱負責把要執行的程式載入記憶體。

參考資料

  1. tutorialspoint-ReactJS Tutorial
  2. React 開發環境設置與 Webpack 入門教學
  3. 如何使用 Webpack 模組整合工具
  4. w3schools.com
  5. 維基百科
  6. EddyChang 部落格
  7. npm官方文件
  8. Babel

>>> 隊友任意門 <<<


Day3 end
by 瑞Ray (ノ>ω<)ノ


上一篇
【Day 02】 什麼是 ReactJS ?
下一篇
【Day04】 Hello World!
系列文
激戰 ReactJS 30天31

尚未有邦友留言

立即登入留言