ES模塊生產應用經驗談

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"},{"type":"strong"}],"text":"本文最初發佈於Bryan Braun的個人博客，遵循創作共用許可，由InfoQ中文站翻譯並分享。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在過去的一年裏，我一直在生產環境中運行一個基於ES模塊的單頁Web應用程序。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這是一個JavaScript應用程序，但它沒有使用Babel、Webpack、Rollup或任何其他轉譯或綁定工具。我在開發中編寫的文件與在生產環境中提供給最終用戶的文件相同。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"該應用程序是一個業餘項目…一個"},{"type":"link","attrs":{"href":"https:\/\/musicboxfun.com\/","title":"","type":null},"content":[{"type":"text","text":"在線音樂盒歌曲製作工具"}]},{"type":"text","text":"。它不是一個大型App，但也不小——目前有大約60個JavaScript模塊，其中包含了組件、工具和第三方庫。其"},{"type":"link","attrs":{"href":"https:\/\/github.com\/bryanbraun\/music-box-fun\/tree\/master\/site","title":"","type":null},"content":[{"type":"text","text":"代碼庫"}]},{"type":"text","text":"看起來很像ReactJS項目，但它沒有使用React。它使用普通的JavaScript，用原生JavaScript特性（如模板字符串）替代像JSX這樣的抽象。這個框架與本文無關，但如果你感興趣，可以閱讀我之前的"},{"type":"link","attrs":{"href":"https:\/\/www.bryanbraun.com\/2019\/09\/11\/web-dev-nirvana-and-why-I-needed-to-let-go-of-reactjs-to-reach-it\/","title":"","type":null},"content":[{"type":"text","text":"文章"}]},{"type":"text","text":"瞭解更多內容。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當我在2019年8月發佈這款應用時，業界一致認爲在生產中使用非綁定ES6模塊是一個壞主意。可汗學院嘗試解綁其主頁的JS，得出的結論是，這樣會"},{"type":"link","attrs":{"href":"https:\/\/blog.khanacademy.org\/forgo-js-packaging-not-so-fast\/","title":"","type":null},"content":[{"type":"text","text":"減慢他們的初始頁面加載速度"}]},{"type":"text","text":"。那是五年前的事了，我還不知道有誰認真考慮過跳過綁定器在生產環境中使用ES6模塊*。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}