一個後端er想進前端娛樂圈
經過幾天的折騰，總算是略微明白前端娛樂圈的一堆工具。
模組化
為什麼要折騰這些？
因為我想用js的模組化，不想再jquery一把梭。
第一個想到的是typescript，過了一遍文件，把現有專案的部分功能用ts改寫後沒問題，學習內容包括：
- 瞭解Node.js，會用其執行指令碼；
- 瞭解包管理工具npm，據~說yarn更好，遂採用後者，會用其安裝、解除安裝包；
- 學習typescript語法，並改寫現有專案的幾個函式。
隨後準備編譯，合併進專案master，接下來問題來了，瀏覽器不能執行。
報錯資訊為：exports is not defined，這個資訊讓我走上了瞎折騰的道路。
規範
得知現代瀏覽器不支援exports關鍵詞，那exports又是什麼？它是CommonJs中的一個語法，我想起ts配置檔案中有個編譯選項就是"module": "commonjs"。
這個CommonJs又是什麼？它是一種規範，就是希望大家都能按這個標準來，同類規範還有：
- AMD (Asynchronous Module Definition)
- CMD (Common Module Definition)
- ES6 (ECMAScript 6)
這裡引用《前端模組化詳解(完整版)》中的一張圖，關於模組化的發展程序和相關介紹，大家可以看看這篇文章，寫的很好。
轉換器
到這裡明白了tsc編譯出來的程式碼雖然可以直接用node.js執行，但卻不能直接運行於瀏覽器中，需要一種「轉換器」來將編譯出來的程式碼在進行一次轉換，經過搜尋得知有以下工具：
- Browserify
- Babel
- Rollup
Browserify官方都不更了，能搜到的資料也都是15、16年左右的，Rollup又太新，只有Babel，從版本6發展到版本7，看起來似乎不錯，選定這個開始繼續轉換。
期間又學會了gulp的用法，gulp是一種流程管理工具，其核心是task,你可以將一系列重複性的工作寫成一個個的task，讓其自動化執行，比如：編譯→轉換程式碼→壓縮混淆等。
大體看了下Babel文件，能使用gulp寫task來完成ts程式碼的編譯（注：Babel6是先將ts編譯，然後執行轉換，共兩步，Babel7編譯和轉換是一步），最終編譯出來的程式碼含有require關鍵詞不被支援，此時想起上圖中有個require.js，難道引入這個js檔案就可以了？答案顯然不行，是我太天真。
後得知Babel編譯出的ESM (ES Module)程式碼並不能直接執行與瀏覽器，也就是說還得轉換一步？？？
我滴個天~ ::>_<::
與ESM同類型的還有個CJS，我也沒心情去了解了，在這一步上浪費了太多時間。
想起之前github上那位求你別更了、學不動了老哥……
感慨自己幸虧以前沒入前端坑。
打包工具
還得繼續啊，得找出「下一個」轉換器啊，於是知道了打包工具：
- webpack
- parcel
webpack是重量級打包工具，配置繁瑣，心想學習成本肯定高，有多高？針對webpack的書都上市了，你說多高？
再看parcel，官網寫著0配置，真好，我就喜歡不用配置的，看了下文件，順利轉換出瀏覽器可用程式碼，開心壞了我滴天~
問題來了，我不是單頁應用，我有多個「入口」啊，難不成要一個個命令列轉？心想肯定有個配置檔案可以改的，等等……0配置檔案？容我凌亂一會~
哭著安裝了webpack，發現webpack4也在學習parcel一些預設配置的優點，但是並沒有「0配置」。
看著文件寫好配置檔案，也沒那麼恐怖。
至此，前端整套流程在腦中逐漸清晰起來。
總結
前端