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

大衣哥

年度

王小源

帅总

囧囧丸

天佑

流氓三金

毕加索

王冕

风小筝

利哥

天佑

?天佑

 沈曼

时间： 2024-11-13 10:23:10

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

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

之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7628(大神的文章写的很详细,建议先看完大神的文章) 一.js模块化 什么是js模块化,我们从历史说起. 1.一开始我们怎么写脚本?就是在html文件中用<script></script>写代码 这种方式的缺点:代码复用靠复制,基本是全局变量. 2.后来我们用js文件写代码,用<

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

JS 模块化.组件化.工程化相关的 15 道面试题 1.什么是模块化? 2.简述模块化的发展历程? 3.AMD.CMD.CommonJS 与 ES6 模块化的区别? 4.它们是如何使用的? 5.export 是什么? 6.module.export.export 与 export defalut 有什么区别? 7.什么是组件化? 8.组件化的原则是什么? 9.全局组件与局部组件的区别? 10.如何注册一个全局组件,并使用它? 11.局部组件又是如何注册并使用的? 12.如何封装一个高复用的 Vu

JS模块化历程

这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 一.无模块时代 在ajax还未提出之前,JS还主要用来在网页上进行表单校验.实现简单的动画效果等等,你可以回想一下那个网页上到处有公告块飘来飘去的时代. 这个时候并没有前端工程师,服务端工程师只需在页面上随便写写js就能搞定需求.那个时候的前端代码大概像这样: if(xx){ //....... } else{ //xxxxxx

关于js模块化历程的长长的流水账

无模块时代 在ajax还未提出之前,js还只是一种“玩具语言”,由Brendan Eich花了不到十天时间发明,用来在网页上进行表单校验.实现简单的动画效果等等,你可以回想一下那个网页上到处有公告块飘来飘去的时代. 这个时候并没有前端工程师,服务端工程师只需在页面上随便写写js就能搞定需求.那个时候的前端代码大概像这样: if(xx){ //.......} else{ //xxxxxxxxxxx} for(var i=0; i<10; i++){ //........} element.onc

JS模块化进程

js的模块化进程 现在前端技术日新月异,对于同一个问题痛点,各个时段有各自的解决方案,这就带来了很大差异.今天我就打算梳理js模块化的历史进程,讲一讲这些方案要做什么,怎么做. js模块化进程的起因 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.当一个项目开发的越来越复杂的时候,你会遇到一些问题:命名冲突(变量和函数命名可能相同),文件依赖(引入外部的文件数目.顺序问题)等. javascript发展的越来越快,超过了它产生时候的自我定位.这

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

从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack使之识别各种语法:JAX,HTML,CSS等 以下是一些坑: 1.ReactJS框架并不能实现JS的模块化 纯ReactJS其实和JqueryTemplate差不多,可以把HTML写成一个模板,然后以插入到某个DIV里的方式来实现HTML的模板化. 但是单纯靠ReactJS这个框架,其实这并没有实现JS的模块

js 模块化历程

作者:吕大豹 网址:http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出之前,js还只是一种“玩具语言”,由Brendan Eich花了不到十天时间发明,用来在网页上进行表单校验.实现简单的动画效果等等,你可以回想一下那个网页上到处有公告

一览js模块化：从CommonJS到ES6

本文由云+社区发表 模块化是指把一个复杂的系统分解到一个一个的模块. 模块化开发的优点: (1)代码复用,让我们更方便地进行代码管理.同时也便于后面代码的修改和维护. (2)一个单独的文件就是一个模块,是一个单独的作用域,只向外暴露特定的变量和函数.这样可以避免污染全局变量,减少变量命名冲突. js模块化规范有:CommonJS.AMD.CMD.ES6的模块系统.本文将依次介绍下每个规范. 0.早期:用script来引入js模块 <script type="text/javascript&

从273二手车的M站点初探js模块化编程

前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数据. 273这个M站点是产品推荐我看的.第一眼看这个产品时我就再想他们这个三次加载和翻页按钮的方式,那么小分页的pageIndex是怎么计算的.所以就顺便看了下源码. 提到看源码时用到了Chrome浏览器的格式化工具(还是朋友推荐我的,不过这个格式化按钮的确不明显,不会的话自行百度). 三次加载和分