iT邦幫忙

0

看官方文檔安裝 React之選擇方式竟然這麼多 (下) - 學習高手安裝自己要的東西

挑戰 React 第四篇

講完透過CDN連結的方式載入React的函式庫與Create React App快速安裝,此篇會寫最後一點高手才用的安裝方式 => 一步一步自己組裝自己要的檔案。

安裝方式

  1. CDN 連結 (Finished)
  2. 新手快速入門 Create React App (Finished)
  3. 經驗豐富高手 更靈活的 Toolchain
  4. 使用 Node.js 的 server-rendered 網頁 用 Next.js (不在這次挑戰內)
  5. 建立靜態網頁的最佳方法 Gatsby (不在這次挑戰內)

經驗豐富高手更靈活的 ToolChain

看到官網這段話,我滿臉問號?什麼是ToolChain?

下方為為官方說明 toolChain 截圖:
https://ithelp.ithome.com.tw/upload/images/20191103/20121499YKjoFK55X8.png

看完這張圖之後,我更是滿臉問號,我只懂 npm 可以幫我管理安裝一些套件,於是我查了一些資訊並整理以下,若有不正確請指教與糾正:

  1. package管理員:建立管理所需要的套件,ex. npm install webpack 安裝 webpack
  2. 模組化:當 javascript 寫越多會有過多的程式碼不知道怎麼管理,因此後來發明檔案模組化,用來增加可讀性與檔案單一責任原則。

以下舉例為將 doSomething.js 模組化,讓有需要用到的檔案引入即可:

//importing 
const doSomething = require('./doSomething.js'); 

//exporting
module.exports = function doSomething(n) {
  // do something
}
  1. bundler:打包這些多個模組化的js/css/圖片檔成一個個js/css/png檔案,以下為示意圖:

好處:

  • 將你的 js 檔案 Bundle 變成單一的檔案
  • 將 LESS 或 SCSS 轉換成 CSS
  • 分散封裝專案使用的程式碼,使載入頁面時只需載入當頁所需的程式碼以加速載入速度等等功能

webpack官方文檔
推薦實際操作webpack文章

  1. compiler 維基百科翻譯:編譯器(compiler)是一種電腦程式,它會將某種程式語言寫成的原始碼(原始語言)轉換成另一種程式語言(目標語言)。
    ex: 以後端舉例:C#/C++等高階語言的目標語言為assembly組合語言

最後交給 compiler 編譯成 javascript

學習心得

一直以來都有聽到 Babelwebpack,後來查了一些資訊原來打包工具不只有 Webpack,自己也跟著上述推薦實際操作webpack文章實際操作一遍,比較有感什麼打包,但這個對現階段的我來說還是太困難,我之後的文章還是以懶人包 create-react-app 迅速產生專案為主,等之後有機會回頭再來仔細研究學習。


尚未有邦友留言

立即登入留言