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

 

 

模塊化方案

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