itHub 托管了大量的軟件代碼，

成為了開源繁榮的注腳。

它被稱為全球最大同性交友網(wǎng)站……

陪伴我們已經(jīng)走過 10 年時(shí)間

本文作者：光譜

1999 年上線的 SourceForge，因?yàn)槊赓M(fèi)一度是世界上最受歡迎的開源軟件代碼托管網(wǎng)站。然而 Google 擔(dān)心它一家獨(dú)大，上線了自家的代碼托管網(wǎng)站 Google Code。

2005 年，Linux 的締造者 Linus Torvalds 對(duì)現(xiàn)有的代碼托管工具效率不滿意，便自己做了一個(gè)名叫 Git 的版本控制工具。Git 頗具革命性，允許大量開發(fā)者同時(shí)為源代碼貢獻(xiàn)新代碼，彼此間并不影響，最重要的在于它是開源的。

三個(gè)來自舊金山的年輕人認(rèn)為 Git 的潛力巨大，在 2008 年正式推出了 GitHub，一個(gè)基于 Git 的代碼托管網(wǎng)站。他們沒想到，GitHub 后來擊敗了元老 SourceForge 和背景強(qiáng)大的 Google Code，成為了全世界最受歡迎的代碼托管網(wǎng)站。

Google 的開源代碼經(jīng)理 Chris DiBona 對(duì) GitHub 給予高度評(píng)價(jià)：

2008 年 4 月 10 日，GitHub 正式上線。

今天，GitHub 終于10 歲了！

去年 5 月底，GitHub 完成了第 1 億個(gè) pull request（PR 合并請(qǐng)求）命令。截至今天，GitHub 上已經(jīng)擁有超過 8000 萬個(gè) repo（代碼倉庫），活躍用戶達(dá)到 2700 萬人，超過 150 萬家公司和機(jī)構(gòu)進(jìn)駐。

由于程序員群體里缺少女性，擁有高純度男性用戶的 GitHub，也被戲稱為全球最大的同性交友網(wǎng)站……

GitHub repo 按照語言劃分的男女用戶比例，最上面的綠色是確認(rèn)的女用戶（2014 年數(shù)據(jù)）

“10 年前的今天，GitHub 正式上線。最一開始，我們只有一個(gè)特別簡(jiǎn)單的目標(biāo)：連接所有的開發(fā)者，讓他們用 Git 更輕松地進(jìn)行項(xiàng)目協(xié)作，”聯(lián)合創(chuàng)始人 Chris Wanstrath 在博客里寫道，“10 年過去了，我們作為公司，作為平臺(tái)都有了很大的變化，但 GitHub 存在的意義從未改變?！?/p>

作為對(duì)十周年的紀(jì)念，GitHub 團(tuán)隊(duì)并沒有選擇回顧公司歷史，而是整理了在他們眼中過去 10 年間的幾大里程碑事件。這很 GitHub——這份光榮，其實(shí)不止屬于平臺(tái)自己，更屬于那些為了讓這個(gè)世界變得更好，通過 Git、GitHub，用 JS、Python 和各種語言貢獻(xiàn)代碼的人們。

以下，就是這些曾在計(jì)算機(jī)業(yè)界和 GitHub 的發(fā)展中創(chuàng)造歷史的事件。

20080403: Rails 轉(zhuǎn)移至 GitHub

Ruby on Rails (Rails)，是一個(gè)用 Ruby 語言編寫的開源 web 應(yīng)用框架。它提高了開發(fā)復(fù)雜網(wǎng)頁的效率，是計(jì)算機(jī)界最受歡迎的開源項(xiàng)目之一。2008 年 4 月，Rails 做出了表率，將版本控制從 SVN 換成了 Git，并成為第一個(gè)進(jìn)駐 GitHub 的大型開源項(xiàng)目。

當(dāng)時(shí)，GitHub 還處在內(nèi)測(cè)階段，沒有正式上線。GitHub 本身就是用 Rails 寫的，這件事為 GitHub 帶來了不小的影響力。

20090103：比特幣誕生

2009 年誕生后，比特幣于 2010 年正式開源，并托管在了 GitHub 上。比特幣是世界上第一個(gè)去中心化的數(shù)字貨幣，它的誕生和開源更是引發(fā)了一場(chǎng)同時(shí)波及金融和科技，甚至更多行業(yè)的革命。

至今，比特幣項(xiàng)目接受了超過 500 名用戶貢獻(xiàn)的代碼。比特幣的底層技術(shù)“區(qū)塊鏈”被廣泛視為下一個(gè)革命性的計(jì)算機(jī)技術(shù)，比特幣項(xiàng)目已經(jīng)被 fork （代碼庫復(fù)制）逾 1.8 萬次，大量的區(qū)塊鏈、數(shù)字貨幣項(xiàng)目在 GitHub 上開源，其中很多都來自比特幣源代碼。

20090521：Node.js 發(fā)布

你可能聽說過網(wǎng)絡(luò)開發(fā)分前端后端之說，前端管網(wǎng)頁呈現(xiàn)，后端管數(shù)據(jù)輸出。然而這兩者不是孤立的，前端開發(fā)也會(huì)涉及到確保后端數(shù)據(jù)能夠正確呈現(xiàn)出來，所以大量采用 JavaScript (JS) 語言的前端人士需要學(xué)習(xí)后端 PHP、Ruby 之類的后端語言，很麻煩。

Node.js 的主要意義是讓前端用 JS 即可完成前端需要的大量開發(fā)任務(wù)，開發(fā)適配多種操作系統(tǒng)的復(fù)雜服務(wù)器端應(yīng)用。簡(jiǎn)單來說，它同時(shí)把前端和后端工程師從各自不熟悉的領(lǐng)域內(nèi)解放了出來。2009 年 5 月底，Node.js 正式在 GitHub 上發(fā)布，收到了不少前端和后端人士的追捧，被認(rèn)為是未來趨勢(shì)。

2014 年，Node.js 主要貢獻(xiàn)者對(duì)這個(gè)項(xiàng)目的官方管理公司不滿，于是自立門戶，fork 原版代碼做了一個(gè)社區(qū)驅(qū)動(dòng)而不是公司化運(yùn)營(yíng)的替代品，名叫 io.js。這個(gè)項(xiàng)目一度比 Node.js 更受歡迎，但后來 Node.js 在開源治理上有了改善，兩個(gè)項(xiàng)目再次合并。

在整個(gè)過程中，GitHub 的開放機(jī)制確保了社區(qū)擁有自主權(quán)力，不必服從于開源項(xiàng)目的所有者。在必要的時(shí)候，fork 是一種力量，也是一種態(tài)度。

20101126：Rails Girls 第一次線下聚會(huì)

2010 年，一群用 Rails 做開發(fā)的女程序員在芬蘭赫爾辛基舉辦了第一次線下聚會(huì)。

三年后，他們專為女性和 LGBTQ 人士開設(shè)了一個(gè)夏令營(yíng) Rails Girls Summer of Code。這個(gè)開源培訓(xùn)項(xiàng)目幫助開源社區(qū)改善了性別多樣性，為解決女性在科技行業(yè)內(nèi)受到的結(jié)構(gòu)性歧視做出了貢獻(xiàn)。

20110101：Travis CI 持續(xù)集成的第一個(gè) PR

持續(xù)集成 (CI) 從像 GitHub 這樣的代碼庫里按照頻率提取最新的代碼，自動(dòng)構(gòu)建項(xiàng)目并進(jìn)行測(cè)試。持續(xù)集成并不能消除 bug，而是讓它們非常容易發(fā)現(xiàn)和改正。比如下面這個(gè) build passing 就是持續(xù)集成工具顯示的，它的大概意思是當(dāng)前版本測(cè)試通過，沒有出現(xiàn) bug。

而 Travis CI 是最受歡迎的，開源的持續(xù)集成工具。2011 年元旦那天，它完成了第一個(gè) PR。Travis CI 和 GitHub 的整合，讓代碼投入生產(chǎn)環(huán)境的整個(gè)過程變得更高效了

20120101：JS 成為 GitHub 第一大語言

最一開始是一種網(wǎng)頁腳本語言，JS 和 HTML、CSS 并列網(wǎng)頁開發(fā)三大語言。被 JS 坑過的程序員經(jīng)常諷刺它是一種不完整的語言，有一個(gè)很古老的段子：寫 C 的看不起寫 C++ 的，寫 C++ 的看不寫 Java 的，寫 Java 的看不起寫 JS 的，寫 JS 的看不起美工，周末大家都在加班，美工帶著女朋友旅游去了。

然而編程語言的鄙視鏈，總是和受歡迎程度相反。從 2012 年開始，JS 超越了 Ruby、Java 和 Python，成為了 GitHub 上最受歡迎的語言，直至今天仍霸占王座。

2013：GitHub 用戶破百萬

開源社區(qū)的發(fā)展使 GitHub 獲得了驚人的增速，在用戶數(shù)和 repo 數(shù)上實(shí)現(xiàn)了兩座里程碑：2013 年，用戶數(shù)突破了 100 萬；同年 12 月，GitHub 的 repo 總數(shù)超過了 1000 萬，其中超過一半是當(dāng)年創(chuàng)建的，僅 11 月就增加了 100 萬個(gè)。

別光看數(shù)字多，這一年里增加的 repo 質(zhì)量也很不錯(cuò)：白宮的 Project Open Data、Docker 等等。亞馬遜 AWS、Facebook、Google、微軟、Twitter、Netflix 等知名公司也上傳了自家的項(xiàng)目。

20140609：Docker 1.0 發(fā)布

被視為革命性技術(shù)的開源容器引擎 Docker，2013 年在 GitHub 上創(chuàng)建了 repo，一年時(shí)間里下載量超過 275 萬份。2014 年，Docker 1.0 終于正式發(fā)布了。

像 Docker 和 Kubernetes (K8S) 這樣的開源項(xiàng)目開啟了一場(chǎng)容器化運(yùn)動(dòng)。開發(fā)、投產(chǎn)和運(yùn)維的難度降低，小型公司不再需要花費(fèi)精力在基礎(chǔ)架構(gòu)上，可以更專注于核心業(yè)務(wù)開發(fā)。

20140721：Django Girls 第一次線下聚會(huì)

交友平臺(tái)不是開玩笑……GitHub 的程序員社交特性使得很多開發(fā)者通過它實(shí)現(xiàn)了線下聚會(huì)。它讓程序員們更容易結(jié)識(shí)彼此，而這對(duì)于女生尤為重要。

2014 年德國柏林，Django 女性開發(fā)者第一次在線下舉辦聚會(huì)，她們的組織仍在為改善性別多樣性而努力著。

20140723：微軟開源 .NET

雖然隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，沒跟上時(shí)代的 .NET 已經(jīng)走向衰落，微軟向開源社區(qū)示好，仍然被視為開源業(yè)界的一個(gè)歷史性事件。微軟創(chuàng)立了一個(gè)開源行動(dòng)，然后把所有的開源代碼包括 .NET 都在 GitHub 上開源。數(shù)千名工程師也讓微軟成為了 GitHub 上最為活躍的公司。

.NET 的開源帶起了一波節(jié)奏，隨后越來越多的大公司遷移到了 GitHub，放棄了自己的代碼托管網(wǎng)站或過時(shí)的代碼庫。

2015：虛幻引擎 4 免費(fèi)和大量游戲相關(guān)開源

2015 年 3 月 2 日，虛幻引擎 4 完全免費(fèi)了。Epic Games 放出了百分之百的 C++ 原始代碼，雖然獨(dú)立開發(fā)者想要開發(fā) AAA 級(jí)別大作還是需要資金，但至少現(xiàn)在他們手上的虛幻引擎 4 和大廠手里的沒有任何區(qū)別。

Epic Games 對(duì)社區(qū)的恩惠得到了報(bào)答。在虛幻引擎最近一次 4.19 版本發(fā)布，包含了 128 個(gè)來自社區(qū)的貢獻(xiàn)。

除了虛幻引擎，還有不少游戲引擎、庫和游戲代碼在 2015 年上了 GitHub，比如《毀滅戰(zhàn)士》和《波斯王子》。最有趣的應(yīng)該是 2048，它的開源帶來了上百款類似的消除游戲……總的來說是件好事。

20150922：GitHub Classroom 發(fā)布

除了工業(yè)界，學(xué)術(shù)界，包括大學(xué)和高中也可以利用 GitHub 進(jìn)行教育了。GitHub Classroom 改進(jìn)了編程課代碼管理、分發(fā)和作業(yè)收集。看上去是在做慈善，其實(shí)此舉很聰明：GitHub 普及要從娃娃抓起，盡管它已經(jīng)碾壓了其它一切競(jìng)爭(zhēng)對(duì)手。

20151203：蘋果開源 Swift

蘋果的新編程語言 Swift 具有函數(shù)式編程和面向?qū)ο缶幊痰闹T多特性，也兼容蘋果平臺(tái)之前的開發(fā)語言 C、Objective-C，也是一個(gè)強(qiáng)類型語言而非腳本語言，也很注重安全性……對(duì)于蘋果開發(fā)者而言，Swift 是件大好事，而有什么比 Swift 開源更讓人大快人心呢？

如果說微軟帶起了一波節(jié)奏，那么蘋果 Swift 編程語言的開源才真的讓其它科技公司都信服。老大哥都開源了，我們還有什么理由不跟隨呢？

20160709：阿波羅 11 號(hào)代碼開源

60 年代的程序員也有幽默感，不信就去 GitHub 上看看阿波羅 11 號(hào)的代碼。比如這個(gè)：臨時(shí)代碼一直用到了月球上。

你可能會(huì)感興趣，50 年前的程序員和代碼是什么樣的？隆重向你介紹阿波羅 11 號(hào)計(jì)算機(jī)系統(tǒng)工程師，MIT 的 Margaret Hamilton：

阿波羅 11 號(hào)代碼開源地址：https://github.com/chrislgarry/Apollo-11

2017：Python 進(jìn)駐 GitHub

Python 因數(shù)據(jù)科學(xué)和深度學(xué)習(xí)的爆發(fā)重新開始受到關(guān)注，在 2015 年它成為了 GitHub 上第三受歡迎的語言，2017 年升至第二。當(dāng)各大公司和人工智能專家開始倡導(dǎo)“人工智能普及化”(democratize AI) 時(shí)，Python 也終于來到了 GitHub。

這使得 Python 在 GitHub 上的流行越發(fā)勢(shì)不可擋，使用 Python 語言的新 repo 數(shù)量，環(huán)比增長(zhǎng)達(dá)到了 70%。

20170215：TensorFlow 1.0 發(fā)布

革命性的深度學(xué)習(xí)庫，就連非專業(yè)人士都聽說過 TF——主要可能因?yàn)?AlphaGo 擊敗了李世乭和柯潔。2016 年，TensorFlow 成為了整個(gè) GitHub 上 fork 最多的項(xiàng)目。

除了 TF，Caffe2、DeepSpeech 等大量深度學(xué)習(xí)工具也都相繼開源。使用這些工具，研究者可以創(chuàng)建面向不同領(lǐng)域的深度學(xué)習(xí)模型，包括并不限于電子游戲、弈類游戲、音樂、繪畫、醫(yī)療、金融等等，帶來新的技術(shù)范式和商業(yè)模式，顯著改善人們的生活。

20180410：十周年，再出發(fā)

在 2017 年，用戶提交了超過 2.9 萬億條代碼，GitHub 也合并的 PR 終于突破了 1 億。2018 年，GitHub 用戶總量達(dá)到 2700 萬，項(xiàng)目總數(shù)超過了 8000 萬。

人工智能、區(qū)塊鏈、量子計(jì)算……許多全新的計(jì)算機(jī)技術(shù)和全新的計(jì)算范式已經(jīng)或正在趕來，代碼和數(shù)據(jù)在某種程度上已經(jīng)取代了石油，成為了人類的新血液。

在這樣的大背景下，GitHub 太重要了，但它也面臨著和 10 年前 SourceForge 等前輩相同的命運(yùn)：全世界的開源代碼都在這里，過度的中心化會(huì)否增加風(fēng)險(xiǎn)？在享受 GitHub 帶來便利的同時(shí)，越來越多人都會(huì)多一個(gè)心眼——代碼上傳之后，本地還是不要 rm 留個(gè)底吧。

最后，給一些 GitHub 整理的資料。首先，按照 PR 統(tǒng)計(jì)的受歡迎語言，JS、Python、Java、Ruby、PHP：

熱門關(guān)鍵字，機(jī)器學(xué)習(xí)、游戲、iOS、API、博客、網(wǎng)站、深度學(xué)習(xí)、Ardiono：

fork 最多的項(xiàng)目，TF、Bootstrap、gitignore；貢獻(xiàn)者最多的項(xiàng)目，VSCode、React Native、NPM：

review 最多的項(xiàng)目，DefinitelyTyped、K8S、Homebrew；討論最多的 repo，K8S、Origin、CMSSW

注冊(cè)用戶最多的國家：中國排第二

引言

如今，Javascript 模塊化規(guī)范非常方便、自然，但這個(gè)新規(guī)范僅執(zhí)行了2年，就在 4 年前，js 的模塊化還停留在運(yùn)行時(shí)支持，10 年前，通過后端模版定義、注釋定義模塊依賴。對(duì)經(jīng)歷過來的人來說，歷史的模塊化方式還停留在腦海中，反而新上手的同學(xué)會(huì)更快接受現(xiàn)代的模塊化規(guī)范。

但為什么要了解 Javascript 模塊化發(fā)展的歷史呢？因?yàn)榉彩露加袃擅嫘?，了?Javascript 模塊化規(guī)范，有利于我們思考出更好的模塊化方案，縱觀歷史，從 1999 年開始，模塊化方案最多維持兩年，就出現(xiàn)了新的替代方案，比原有的模塊化更清晰、強(qiáng)壯，我們不能被現(xiàn)代模塊化方式限制住思維，因?yàn)楝F(xiàn)在的 ES2015 模塊化方案距離發(fā)布也僅僅過了兩年。

2 內(nèi)容概要

直接定義依賴 (1999): 由于當(dāng)時(shí) js 文件非常簡(jiǎn)單，模塊化方式非常簡(jiǎn)單粗暴 —— 通過全局方法定義、引用模塊。這種定義方式與現(xiàn)在的 commonjs 非常神似，區(qū)別是 commonjs 以文件作為模塊，而這種方法可以在任何文件中定義模塊，模塊不與文件關(guān)聯(lián)。

閉包模塊化模式 (2003): 用閉包方式解決了變量污染問題，閉包內(nèi)返回模塊對(duì)象，只需對(duì)外暴露一個(gè)全局變量。

模版依賴定義 (2006): 這時(shí)候開始流行后端模版語法，通過后端語法聚合 js 文件，從而實(shí)現(xiàn)依賴加載，說實(shí)話，現(xiàn)在 go 語言等模版語法也很流行這種方式，寫后端代碼的時(shí)候不覺得，回頭看看，還是掛在可維護(hù)性上。

注釋依賴定義 (2006): 幾乎和模版依賴定義同時(shí)出現(xiàn)，與 1999 年方案不同的，不僅僅是模塊定義方式，而是終于以文件為單位定義模塊了，通過 lazyjs 加載文件，同時(shí)讀取文件注釋，繼續(xù)遞歸加載剩下的文件。

外部依賴定義 (2007): 這種定義方式在 cocos2d-js 開發(fā)中普遍使用，其核心思想是將依賴抽出單獨(dú)文件定義，這種方式不利于項(xiàng)目管理，畢竟依賴抽到代碼之外，我是不是得兩頭找呢？所以才有通過 webpack 打包為一個(gè)文件的方式暴力替換為 commonjs 的方式出現(xiàn)。

Sandbox模式 (2009): 這種模塊化方式很簡(jiǎn)單，暴力，將所有模塊塞到一個(gè) sanbox 變量中，硬傷是無法解決明明沖突問題，畢竟都塞到一個(gè) sandbox 對(duì)象里，而 Sandbox 對(duì)象也需要定義在全局，存在被覆蓋的風(fēng)險(xiǎn)。模塊化需要保證全局變量盡量干凈，目前為止的模塊化方案都沒有很好的做到這一點(diǎn)。

依賴注入 (2009): 就是大家熟知的 angular1.0，依賴注入的思想現(xiàn)在已廣泛運(yùn)用在 react、vue 等流行框架中。但依賴注入和解決模塊化問題還差得遠(yuǎn)。

CommonJS (2009): 真正解決模塊化問題，從 node 端逐漸發(fā)力到前端，前端需要使用構(gòu)建工具模擬。

Amd (2009): 都是同一時(shí)期的產(chǎn)物，這個(gè)方案主要解決前端動(dòng)態(tài)加載依賴，相比 commonJs，體積更小，按需加載。

Umd (2011): 兼容了 CommonJS 與 Amd，其核心思想是，如果在 commonjs 環(huán)境（存在 module.exports，不存在 define），將函數(shù)執(zhí)行結(jié)果交給 module.exports 實(shí)現(xiàn) Commonjs，否則用 Amd 環(huán)境的 define，實(shí)現(xiàn) Amd。

Labeled Modules (2012): 和 Commonjs 很像了，沒什么硬傷，但生不逢時(shí)，碰上 Commonjs 與 Amd，那只有被人遺忘的份了。

YModules (2013): 既然都出了 Commonjs Amd，文章還列出了此方案，一定有其獨(dú)到之處。其核心思想在于使用 provide 取代 return，可以控制模塊結(jié)束時(shí)機(jī)，處理異步結(jié)果；拿到第二個(gè)參數(shù) module，修改其他模塊的定義（雖然很有拓展性，但用在項(xiàng)目里是個(gè)攪屎棍）。

ES2015 Modules (2015): 就是我們現(xiàn)在的模塊化方案，還沒有被瀏覽器實(shí)現(xiàn)，大部分項(xiàng)目已通過 babel 或 typescript 提前體驗(yàn)。

3 精讀

從語言層面到文件層面的模塊化

從 1999 年開始，模塊化探索都是基于語言層面的優(yōu)化，真正的革命從 2009 年 CommonJS 的引入開始，前端開始大量使用預(yù)編譯。

這篇文章所提供的模塊化歷史的方案都是邏輯模塊化，從 CommonJS 方案開始前端把服務(wù)端的解決方案搬過來之后，算是看到標(biāo)準(zhǔn)物理與邏輯統(tǒng)一的模塊化。但之后前端工程不得不引入模塊化構(gòu)建這一步。正是這一步給前端開發(fā)無疑帶來了諸多的不便，尤其是現(xiàn)在我們開發(fā)過程中經(jīng)常為了優(yōu)化這個(gè)工具帶了很多額外的成本。

從 CommonJS 之前其實(shí)都只是封裝，并沒有一套模塊化規(guī)范，這個(gè)就有些像類與包的概念。我在10年左右用的最多的還是 YUI2，YUI2 是用 namespace 來做模塊化的，但有很多問題沒有解決，比如多版本共存，因此后來 YUI3 出來了。

YUI().use('node', 'event', function (Y) {
 // The Node and Event modules are loaded and ready to use.
 // Your code goes here!
});

YUI3 的 sandbox 像極了差不多同時(shí)出現(xiàn)的 AMD 規(guī)范，但早期 yahoo 在前端圈的影響力還是很大的，而 requirejs 到 2011 年才誕生，因此圈子不是用著 YUI 要不就自己封裝一套 sandbox，內(nèi)部使用 jQuery。

為什么模塊化方案這么晚才成型，可能早期應(yīng)用的復(fù)雜度都在后端，前端都是非常簡(jiǎn)單邏輯。后來 Ajax 火了之后，web app 概念的開始流行，前端的復(fù)雜度也呈指數(shù)級(jí)上漲，到今天幾乎和后端接近一個(gè)量級(jí)。工程發(fā)展到一定階段，要出現(xiàn)的必然會(huì)出現(xiàn)。

前端三劍客的模塊化展望

從 js 模塊化發(fā)展史，我們還看到了 css html 模塊化方面的嚴(yán)重落后，如今依賴編譯工具的模塊化增強(qiáng)在未來會(huì)被標(biāo)準(zhǔn)所替代。

原生支持的模塊化，解決 html 與 css 模塊化問題正是以后的方向。

再回到 JS 模塊化這個(gè)主題，開頭也說到是為了構(gòu)建 scope，實(shí)則提供了業(yè)務(wù)規(guī)范標(biāo)準(zhǔn)的輸入輸出的方式。但文章中的 JS 的模塊化還不等于前端工程的模塊化，Web 界面是由 HTML、CSS 和 JS 三種語言實(shí)現(xiàn)，不論是 CommonJS 還是 AMD 包括之后的方案都無法解決 CSS 與 HTML 模塊化的問題。

對(duì)于 CSS 本身它就是 global scope，因此開發(fā)樣式可以說是喜憂參半。近幾年也涌現(xiàn)把 HTML、CSS 和 JS 合并作模塊化的方案，其中 react/css-modules 和 vue 都為人熟知。當(dāng)然，這一點(diǎn)還是非常依賴于 webpack/rollup 等構(gòu)建工具，讓我們意識(shí)到在 browser 端還有很多本質(zhì)的問題需要推進(jìn)。

對(duì)于 css 模塊化，目前不依賴預(yù)編譯的方式是 styled-component，通過 js 動(dòng)態(tài)創(chuàng)建 class。而目前 css 也引入了與 js 通信的機(jī)制 與 原生變量支持。未來 css 模塊化也很可能是運(yùn)行時(shí)的，所以目前比較看好 styled-component 的方向。

對(duì)于 html 模塊化，小尤最近爆出與 chrome 小組調(diào)研 html Modules，如果 html 得到了瀏覽器，編輯器的模塊化支持，未來可能會(huì)取代 jsx 成為最強(qiáng)大的模塊化、模板語言。

對(duì)于 js 模塊化，最近出現(xiàn)的 <script type="module"> 方式，雖然還沒有得到瀏覽器原生支持，但也是我比較看好的未來趨勢(shì)，這樣就連 webpack 的拆包都不需要了，直接把源代碼傳到服務(wù)器，配合 http2.0 完美拋開預(yù)編譯的枷鎖。

上述三中方案都不依賴預(yù)編譯，分別實(shí)現(xiàn)了 html、css、js 模塊化，相信這就是未來。

模塊化標(biāo)準(zhǔn)推進(jìn)速度仍然緩慢

2015 年提出的標(biāo)準(zhǔn)，在 17 年依然沒有得到實(shí)現(xiàn)，即便在 nodejs 端。

這幾年 TC39 對(duì)語言終于重視起來了，慢慢有動(dòng)作了，但針對(duì)模塊標(biāo)準(zhǔn)制定的速度，與落實(shí)都非常緩慢，與 javascript 越來越流行的趨勢(shì)逐漸脫節(jié)。nodejs 至今也沒有實(shí)現(xiàn) ES2015 模塊化規(guī)范，所有 jser 都處在構(gòu)建工具的陰影下。

Http 2.0 對(duì) js 模塊化的推動(dòng)

js 模塊化定義的再美好，瀏覽器端的支持粒度永遠(yuǎn)是瓶頸，http 2.0 正是考慮到了這個(gè)因素，大力支持了 ES 2015 模塊化規(guī)范。

幸運(yùn)的是，模塊化構(gòu)建將來可能不再需要。隨著 HTTP/2 流行起來，請(qǐng)求和響應(yīng)可以并行，一次連接允許多個(gè)請(qǐng)求，對(duì)于前端來說宣告不再需要在開發(fā)和上線時(shí)再做編譯這個(gè)動(dòng)作。

幾年前，模塊化幾乎是每個(gè)流行庫必造的輪子（YUI、Dojo、Angular），大牛們自己爽的同時(shí)其實(shí)造成了社區(qū)的分裂，很難積累。有了 ES2015 Modules 之后，JS 開發(fā)者終于可以像 Java 開始者十年前一樣使用一致的方式愉快的互相引用模塊。

不過 ES2015 Modules 也只是解決了開發(fā)的問題，由于瀏覽器的特殊性，還是要經(jīng)過繁瑣打包的過程，等 Import，Export 和 HTTP 2.0 被主流瀏覽器支持，那時(shí)候才是徹底的模塊化。

Http 2.0 后就不需要構(gòu)建工具了嗎？

看到大家基本都提到了 HTTP/2，對(duì)這項(xiàng)技術(shù)解決前端模塊化及資源打包等工程問題抱有非常大的期待。很多人也認(rèn)為 HTTP/2 普及后，基本就沒有 Webpack 什么事情了。

不過 Webpack 作者 @sokra 在他的文章 webpack & HTTP/2 里提到了一個(gè)新的 Webpack 插件 AggressiveSplittingPlugin。簡(jiǎn)單的說，這款插件就是為了充分利用 HTTP/2 的文件緩存能力，將你的業(yè)務(wù)代碼自動(dòng)拆分成若干個(gè)數(shù)十 KB 的小文件。后續(xù)若其中任意一個(gè)文件發(fā)生變化，可以保證其他的小 chunck 不需要重新下載。

可見，即使不斷的有新技術(shù)出現(xiàn)，也依然需要配套的工具來將前端工程問題解決方案推向極致。

模塊化是大型項(xiàng)目的銀彈嗎？

只要遵循了最新模塊化規(guī)范，就可以使項(xiàng)目具有最好的可維護(hù)性嗎？ Js 模塊化的目的是支持前端日益上升的復(fù)雜度，但絕不是唯一的解決方案。

分析下 JavaScript 為什么沒有模塊化，為什么又需要模塊化：這個(gè) 95 年被設(shè)計(jì)出來的時(shí)候，語言的開發(fā)者根本沒有想到它會(huì)如此的大放異彩，也沒有將它設(shè)計(jì)成一種模塊化語言。按照文中的說法，99 年也就是 4 年后開始出現(xiàn)了模塊化的需求。如果只有幾行代碼用模塊化是扯，初始的 web 開發(fā)業(yè)務(wù)邏輯都寫在 server 端，js 的作用小之又小。而現(xiàn)在 spa 都出現(xiàn)了，幾乎所有的渲染邏輯都在前端，如果還是沒有模塊化的組織，開發(fā)過程會(huì)越來越難，維護(hù)也是更痛苦。

本文中已經(jīng)詳細(xì)說明了模塊化的發(fā)展和優(yōu)劣，這里不準(zhǔn)備做過多的贅述。但還有一個(gè)問題需要我們?nèi)リP(guān)注，那就是在模塊化之后還有一個(gè)模塊間耦合的問題，如果模塊間耦合度大也會(huì)降低代碼的可重用性或者說復(fù)用性。所以也出現(xiàn)了降低耦合的觀察者模式或者發(fā)布/訂閱模式。這對(duì)于提升代碼重用，復(fù)用性和避免單點(diǎn)故障等都很重要。說到這里，還想順便提一下最近流行起來的響應(yīng)式編程（RxJS），響應(yīng)式編程中有一個(gè)很核心的概念就是 observable，也就是 Rx 中的流（stream）。它可以被 subscribe，其實(shí)也就是觀察者設(shè)計(jì)模式。

總結(jié)

未來前端復(fù)雜度不斷增加已成定論，隨著后端成熟，自然會(huì)將焦點(diǎn)轉(zhuǎn)移到前端領(lǐng)域，而且服務(wù)化、用戶體驗(yàn)越來越重要，前端體驗(yàn)早不是當(dāng)初能看就行，任何網(wǎng)頁的異常、視覺的差異，或文案的模糊，都會(huì)導(dǎo)致用戶流失，支付中斷。前端對(duì)公司營(yíng)收的影響，漸漸與后端服務(wù)宕機(jī)同等嚴(yán)重，所以前端會(huì)越來越重，異常監(jiān)控，性能檢測(cè)，工具鏈，可視化等等都是這幾年大家逐漸重視起來的。

我們?cè)缫巡荒軐?javascript 早期玩具性質(zhì)的模塊化方案用于現(xiàn)代越來越重要的系統(tǒng)中，前端界必然出現(xiàn)同等重量級(jí)的模塊化管理方案，感謝 TC39 制定的 ES2015 模塊化規(guī)范，我們已經(jīng)離不開它，哪怕所有人必須使用 babel。

話說回來，標(biāo)準(zhǔn)推進(jìn)的太慢，我們還是把編譯工具當(dāng)作常態(tài)，抱著哪怕支持了 ES2015 所有特性，babel 依然還有用的心態(tài)，將預(yù)編譯進(jìn)行到底。一句話，模塊化仍在路上。js 模塊化的矛頭已經(jīng)對(duì)準(zhǔn)了 css 與 html，這兩位元老也該向前衛(wèi)的 js 學(xué)習(xí)學(xué)習(xí)了。

未來 css、html 的模塊化會(huì)自立門戶，還是賦予 js 更強(qiáng)的能力，讓兩者的模塊化依附于 js 的能力呢？目前 html 有自立門戶的苗頭（htmlModules），而 css 遲遲沒有改變，社區(qū)出現(xiàn)的 styled-component 已經(jīng)用 js 將 css 模塊化得很好了，最新 css 規(guī)范也支持了與 js 的變量通信，難道希望依附于 js 嗎？這里希望得到大家更廣泛的討論。

我也認(rèn)同，畢竟壓縮、混淆、md5、或者利用 nonce 屬性對(duì) script 標(biāo)簽加密，都離不開本地構(gòu)建工具。

據(jù)說 http2 的優(yōu)化中，有個(gè)最佳文件大小與數(shù)量的比例，那么還是脫離不了構(gòu)建工具，前端未來會(huì)越來越復(fù)雜，同時(shí)也越來越美好。

至此，對(duì)于 javascript 模塊化討論已接近尾聲，對(duì)其優(yōu)缺點(diǎn)也基本達(dá)成了一致。前端復(fù)雜度不斷提高，促使著模塊化的改進(jìn)，代理（瀏覽器、node） 的支持程度，與前端特殊性（流量、緩存）可能前端永遠(yuǎn)也離不開構(gòu)建工具，新的標(biāo)準(zhǔn)會(huì)讓這些工作做的更好，同時(shí)取代、增強(qiáng)部分特征，前端的未來是更加美好的，復(fù)雜度也更高。