JS 模塊化和打包方案收集


1.這里想討論的是拆分規則,不是在問哪個工具怎么使用。
2.這里沒有在想找正確答案,因為感覺這個問題要結合具體業務場景。

隨着項目開發越來越大,一開始代碼全打包到一個文件的方式,讓文件越來越大,接下來要做拆分,可具體的拆分規則又不是很熟悉,或者說,我沒有一個很好的方案,所以想到這是一個值得討論的話題,想提問的形式拿出來,請各位大神有這方面接觸的分享一下自己的經驗。

這個問題有一定局限性,因為不同的業務場景,可能拆分方式還有不同,所以,可否想討論的朋友能把具體的業務場景細說一下,再結合具體業務場景給出解決方案。

 

 

已有 JS 模塊化和打包方案收集

博客分類: nodejs生態+grunt
模塊化方案

RequireJS

AMD 方案, 常用的 define 語法, 異步加載模塊, 目前很多支持:

官網 http://requirejs.org/
Github https://github.com/jrburke/requirejs
Getting started https://gist.github.com/willurd/6054834
打包工具 http://jamjs.org/
相似方案:

ozjs: http://ozjs.org/cn/
Browserify

CommonJS 方案, 共用 NPM 部分平台無關的模塊:

官網 http://browserify.org/
Github https://github.com/substack/node-browserify
教程 http://superbigtree.tumblr.com/post/54873453939/introduction-to-browserify
NPM npmjs.org
Browserify 兼容 Node 模塊引用語法和 Node 模塊化文件加載方案,
瀏覽器端運行前需要完成代碼的合並, 並配合 SourceMap 進行調試.

相似方案:

commonjs-everywhere https://github.com/michaelficarra/commonjs-everywhere
stitch https://github.com/sstephenson/stitch
onejs https://github.com/azer/onejs
gluejs https://github.com/mixu/gluejs
SeaJS

支付寶的前端加載器, 遵循 CMD 規范, 打包工具是 SPM.

官網 http://seajs.org/docs/
Github https://github.com/seajs/seajs/issues
Why SeaJS http://cyj.me/why-seajs/
官方模塊 http://aralejs.org/
打包工具 SPM http://docs.spmjs.org/
第三方源 https://spmjs.org/
相關方案:

BravoJS https://code.google.com/p/bravojs/
Component

Node.js 社區另一個為前端優化的模塊方案, 類似 Browserify, 但鼓勵將 HTML/CSS 打包到模塊.
模塊保存在 Github.

模塊列表 http://component.io/
作者寫的介紹 http://tjholowaychuk.com/post/27984551477/components
Github https://github.com/component
ES6

ES6 Modules https://gist.github.com/wycats/51c96e3adcdb3a68cbc3
jspm.io http://jspm.io/
JS 規范里制定的模塊化方案, 瀏覽器實現還沒, 不過有模塊可以提供類似功能.

es6-module-transpiler https://github.com/square/es6-module-transpiler
my.js https://github.com/hax/my.js
Modjs

騰訊的.

官網 http://madscript.com/modjs/
Github https://github.com/modulejs/modjs
AngularJS

官網 http://angularjs.org/
Github https://github.com/angular
模塊列表 http://ngmodules.org/
Package Manager

Bower

來自 Twitter 的模塊管理方案, 或者僅僅是包管理工具.. 模塊直接從 Github 下載

官網 http://bower.io/
模塊列表 http://sindresorhus.com/bower-components/
相關方案:

Yeoman http://yeoman.io/
Ender

官網 http://ender.jit.su/
Volo

官網 http://volojs.org/
代碼打包

Linner

Github https://github.com/SaitoWu/linner
WebPack

Github https://github.com/webpack/webpack
Home Page http://webpack.github.io/#/home
UMD

Github https://github.com/umdjs/umd
uRequire Documents http://urequire.org/quick-introduction
方案的對比

So, you want to use require() in the browser…http://blog.brianbeck.com/post/10667967423/node-js-require-in-the-browser
NPM vs JAM, RequireJS vs Browserify vs Enderhttp://www.reddit.com/r/javascript/comments/vc9d9/npm_vs_jam_requirejs_vs_browserify_vs_ender/
The State of Javascript Package Managementhttp://wibblycode.wordpress.com/2013/01/01/the-state-of-javascript-package-management/
Front-End Package Manager https://github.com/wilmoore/frontend-packagers
Package Managers: An Introductory Guide For The Uninitiated Front-End Developerhttp://tech.pro/tutorial/1190/package-managers-an-introductory-guide-for-the-uninitiated-front-end-developer

大衣哥

年度

王小源

帥總

囧囧丸

天佑

流氓三金

畢加索

王冕

風小箏

利哥

天佑

天佑

 沈曼

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM