已有 JS 模块化和打包方案收集
Chasingsun 2015-08-30
模块化方案
RequireJS
AMD方案,常用的define语法,异步加载模块,目前很多支持:
官网http://requirejs.org/
Githubhttps://github.com/jrburke/requirejs
Gettingstartedhttps://gist.github.com/willurd/6054834
打包工具http://jamjs.org/
相似方案:
ozjs:http://ozjs.org/cn/
Browserify
CommonJS方案,共用NPM部分平台无关的模块:
官网http://browserify.org/
Githubhttps://github.com/substack/node-browserify
教程http://superbigtree.tumblr.com/post/54873453939/introduction-to-browserify
NPMnpmjs.org
Browserify兼容Node模块引用语法和Node模块化文件加载方案,
浏览器端运行前需要完成代码的合并,并配合SourceMap进行调试.
相似方案:
commonjs-everywherehttps://github.com/michaelficarra/commonjs-everywhere
stitchhttps://github.com/sstephenson/stitch
onejshttps://github.com/azer/onejs
gluejshttps://github.com/mixu/gluejs
SeaJS
支付宝的前端加载器,遵循CMD规范,打包工具是SPM.
官网http://seajs.org/docs/
Githubhttps://github.com/seajs/seajs/issues
WhySeaJShttp://cyj.me/why-seajs/
官方模块http://aralejs.org/
打包工具SPMhttp://docs.spmjs.org/
第三方源https://spmjs.org/
相关方案:
BravoJShttps://code.google.com/p/bravojs/
Component
Node.js社区另一个为前端优化的模块方案,类似Browserify,但鼓励将HTML/CSS打包到模块.
模块保存在Github.
模块列表http://component.io/
作者写的介绍http://tjholowaychuk.com/post/27984551477/components
Githubhttps://github.com/component
ES6
ES6Moduleshttps://gist.github.com/wycats/51c96e3adcdb3a68cbc3
jspm.iohttp://jspm.io/
JS规范里制定的模块化方案,浏览器实现还没,不过有模块可以提供类似功能.
es6-module-transpilerhttps://github.com/square/es6-module-transpiler
my.jshttps://github.com/hax/my.js
Modjs
腾讯的.
官网http://madscript.com/modjs/
Githubhttps://github.com/modulejs/modjs
AngularJS
官网http://angularjs.org/
Githubhttps://github.com/angular
模块列表http://ngmodules.org/
PackageManager
Bower
来自Twitter的模块管理方案,或者仅仅是包管理工具..模块直接从Github下载
官网http://bower.io/
模块列表http://sindresorhus.com/bower-components/
相关方案:
Yeomanhttp://yeoman.io/
Ender
官网http://ender.jit.su/
Volo
官网http://volojs.org/
代码打包
Linner
Githubhttps://github.com/SaitoWu/linner
WebPack
Githubhttps://github.com/webpack/webpack
HomePagehttp://webpack.github.io/#/home
UMD
Githubhttps://github.com/umdjs/umd
uRequireDocumentshttp://urequire.org/quick-introduction
方案的对比
So,youwanttouserequire()inthebrowser…http://blog.brianbeck.com/post/10667967423/node-js-require-in-the-browser
NPMvsJAM,RequireJSvsBrowserifyvsEnderhttp://www.reddit.com/r/javascript/comments/vc9d9/npm_vs_jam_requirejs_vs_browserify_vs_ender/
TheStateofJavascriptPackageManagementhttp://wibblycode.wordpress.com/2013/01/01/the-state-of-javascript-package-management/
Front-EndPackageManagerhttps://github.com/wilmoore/frontend-packagers
PackageManagers:AnIntroductoryGuideForTheUninitiatedFront-EndDeveloperhttp://tech.pro/tutorial/1190/package-managers-an-introductory-guide-for-the-uninitiated-front-end-developer
