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

大衣哥

年度

王小源

帅总

囧囧丸

天佑

流氓三金

毕加索

王冕

风小筝

利哥

天佑

天佑

 沈曼

JS 模块化和打包方案收集的更多相关文章

  1. 已有 JS 模块化和打包方案收集

    模块化方案 RequireJS AMD 方案, 常用的 define 语法, 异步加载模块, 目前很多支持: 官网 http://requirejs.org/ Github https://githu ...

  2. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  3. 面试指南」JS 模块化、组件化、工程化相关的 15 道面试题

    JS 模块化.组件化.工程化相关的 15 道面试题 1.什么是模块化? 2.简述模块化的发展历程? 3.AMD.CMD.CommonJS 与 ES6 模块化的区别? 4.它们是如何使用的? 5.exp ...

  4. ReactJS webpack实现JS模块化使用的坑

    从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...

  5. 闲聊——浅谈前端js模块化演变

    function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...

  6. js模块化历程

    这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出 ...

  7. js 模块化历程

    作者:吕大豹 网址:http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生 ...

  8. require.js实现js模块化编程(二):RequireJS Optimizer

    require.js实现js模块化编程(二):RequireJS Optimizer 这一节,我们主要学习一下require.js所提供的一个优化工具r.js的用法. 1.认识RequireJS Op ...

  9. 一览js模块化:从CommonJS到ES6

    本文由云+社区发表 模块化是指把一个复杂的系统分解到一个一个的模块. 模块化开发的优点: (1)代码复用,让我们更方便地进行代码管理.同时也便于后面代码的修改和维护. (2)一个单独的文件就是一个模块 ...

随机推荐

  1. 使用django开发博客过程记录5——日期归档和视图重写

    针对每条博客的观看次数我么是使用django的Mixin实现的: def get(self, request, *args, **kwargs): last_visit = request.sessi ...

  2. Git 总结

    详情请参考:https://git-scm.com/book/zh/v2 注意事项:#1. 多提交(相当于多保存,多^S): 在Git中任何已提交的东西几乎总是可以恢复的. 甚至那些被删除的分支中的提 ...

  3. 用JMeter测试monggodb的请求

    JMeter测试MongoDB性能有两种方式,一种是利用JMeter直接测试MongoDB[即通过MongoDB协议测试],另一种是写Java代码方式测试MongoDB[即通过java请求测试] 注: ...

  4. RabbitMQ修改端口号和心跳时间

    定读者正在Windows系列的操纵体系中装置好了Rabbit MQ后,请找到装置途径下的etc文件夹下,将rabbitmq.config.example备份一份,并点窜为config范例的文件,即为] ...

  5. java反射(基础了解)

    package cn.itcast_01; /** *Person类 */ public class Person {    /** 姓名 */    private String name;     ...

  6. http://875880923.iteye.com/blog/1963400

    已经接触了一段时间的ACM(详见百度百科)了,每回刷杭电oj的题累了的时候,就喜欢去看Ranklist里面的排名,看看前面的牛人的格言,让自己有一点憧憬.有一天突然好奇杭电上的人做的总题数的数量与人数 ...

  7. Javascript设计模式学习一

    学习Javascript设计模式之前,需要先了解一些相关知识,面向对象的基础知识.this等重要概念,以及掌握一些函数式编程的技巧. Js多态 多态的思想:实际上是把“做什么”和“谁去做”分离开来.例 ...

  8. 使用SVG绘制湖南地图

    项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...

  9. Java图片处理 Thumbnails框架

    一.设置图片的缩放比例或者图片的质量比   第一步:导入maven的jar包 <dependency>     <groupId>net.coobird</groupId ...

  10. 2016 Google code jam 答案

    二,RoundC import java.io.BufferedReader; import java.io.FileInputStream; import java.io.FileNotFoundE ...