iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
0
Modern Web

aesthEtic,CYBERの audio / VISUAL,網頁中的聲音與影像研究系列 第 4

§d04§ 荒野探勘部!山也模組,地也模組,Shader 也模組!Three.js + Webpack 專案架構。

0. 今日工事

(第一集)

  • 受洗吧!模組化的魔!何以 module?
  • 三萬里長征:三引入 ES6 語法之苦僧行
    • 高樓平地起,長征 #4776
    • #9310 史詩傳頌,不像台灣地位未定

(第二集)

  • Webpack 江湖:走跳的基本眉角
    • 第六感直覺判斷:環境變數法
    • 乾濕分離:webpack.dev.config.js, webpack.prod.config.js
    • 最法的:Best Practice

(第三集)

  • 三的實踐
    • 插件差不完
    • 檔案空間

1. 受洗吧!模組化的魔!何以 module?

https://ithelp.ithome.com.tw/upload/images/20171223/201078285yloXMox9y.png
這一切都是為了之後引入聲音震動大法鋪路,遠道相迎。Web Audio 時常也需要細心呵護,兩邊能夠分檔、分房、分模組照顧才是長遠之計啊,沒錯!

憶當年, include 是 web 青年的時代記憶。親手 include 第三方套件與自己的 script.js,就覺得兩個世界交融再一起黏噠噠,你的心靈透過 JavaScript 與偌大的網路融合為一。那浪漫啊,很難忘,卻走得也快。過了一兩個星期就發現自己曾經深愛的 script 已變得面目可憎。左擁右抱,到處都是婀娜的第三方套件,改個 dependency 都刻骨銘心。曾相見相識相認相愛,不過幾把天而已,可讀性極差。我們割髮出家,入了 Module 寺。Module 寺裡面,人是皮囊袋,一生不過吃喝拉撒,單純 input/ouput。Modulize 後,每個問題都被拆成更小的問題,大事化小,小事化無。簡單愛,簡單棒,一切單純,這批真單純。

https://ithelp.ithome.com.tw/upload/images/20171223/20107828rjvRllFhCL.jpg

Webpack 是無人不知的打包機。假如去泰式便當點打拋雞外帶,你一定會請店員幫你打包,同理可證,deploy 排骨飯也要打包,對吧。對嗎?好,先這樣。Webpack 不只取代 browserify 做整合 files 的動作,結合 loaders 更把 gruntgulp 都擠出婚姻市場。Webpack 的好,你不能不知道

2. 三萬里長征:三引入 ES6 語法之苦僧行

2.1 高樓平地起,長征 #4776 開

***#4776 Moving to a modular architecture (2014.5.7)***
人們在這專門在討論 Three.js 的模組化架構,打包機流行從 Broserify 已經也走到了 Webpack。始終沒有英雄能過這關,議論紛紛。
從 2014 年中開始,到 2016.7.22 才真正有個 PR 解掉這些問題。
@Rich-Harris,也就是完成鬼斧神工 PR 的仁者在 PR 一開頭就說:

Bear with me, this PR is a bit of an epic …

出師表,壯志未酬,遙想當時 PR 還沒 merge,沒人知道歷史骨牌是否倒下。瞥了眼網頁,紫色的 merge 昭然在目,

古代有云:「紫氣東來。」

紫色俗稱是帝王之色,merge 沒毛病。
@kumavis,也就是開啟這個 issue 的人,在 issue closed 之後說道:"It’s been a wonderful ride.”。寫下了歷史的一頁,真他媽的好長一頁。開始第二頁。

https://ithelp.ithome.com.tw/upload/images/20171223/20107828uzsxjwT1cv.png

2.2 史詩傳頌,不像台灣地位未定

***#9310 Module (2017.7.22)***
長征的場景轉移到這個 PR,簡潔好記名字是 merged 的好兆頭。果不其然,隔天立馬融,祝融。從此之後,人們可以使用 ES6 語法 import 三,雖然三內有些 workaround,但是整體測試跑起來也都沒有問題。連帶的,開始可以使用 Webpack 的glslify-loader去載入 shader 檔案,連 shader 裡面都可以模組化
重申 code reusability 的重要性,我今天在 A 專案寫完一個 scene 或是 object,B 只要 copy paste 大法按兩下就完全攻略了,媽啊爽。事已至此,整個專案已經大致上達到前一個 issue 想要達到的目的:

  • easier development:管理起來對眼睛好
  • better linting:因為 code 就不會陷在 html 的 tag 沼澤裡面
  • simpler build process:webpack 打包機絕非浪得虛名

3. 請愛CYBERの audio / VISUAL

打包機 config 的神秘儀式,互相撫觸的神聖經驗?glslify loader 的插件怎麼模組化 shader program,回收業的低端生活?打造超激專業 console,媽媽經過房間問都會你說:「誒?你到 NASA 工作?」那到底,到底,三的架構怎麼個 ES6,源代碼美了嗎?世界更好的吧,我們都是這樣希望。

https://ithelp.ithome.com.tw/upload/images/20171223/20107828F0GnRY8o0d.jpg

慢慢的走,一步一腳印,等待,是為了抽更長遠的路。凜冬將盡,browser 裡的野獸蠢蠢欲動,聲之聲、聲之情、聲之形。那是大鼓吧?「嗯!嗯!嗯!嗯!」啊!小鼓們也到了。若不想閉上眼睛,請繼續爬山祈禱。

關於作者

Vibert Thio

致力於將對於技術的深度研究轉化為新型態藝術創作的能量,並思考技術的拓展/侷限與其對於藝術論述/呈現的影響。專長為數位藝術創作、音像程式設計、互動設計,喜愛即時運算的臨場感與不可預測。


上一篇
§d03§ 打坐練神功!Three.js 黑魔法的咒語 WebGL!GPU 的平行宇宙!媽啊。
下一篇
§d05§ 打坐練神功!打包機乾濕分離!Webpack Dev / Prod Best Practice !
系列文
aesthEtic,CYBERの audio / VISUAL,網頁中的聲音與影像研究30

尚未有邦友留言

立即登入留言