已有 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/
相关方案:
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
腾讯的.
AngularJS
- 官网 http://angularjs.org/
- Github https://github.com/angular
- 模块列表 http://ngmodules.org/
Package Manager
Bower
来自 Twitter 的模块管理方案, 或者仅仅是包管理工具.. 模块直接从 Github 下载
相关方案:
- Yeoman http://yeoman.io/
Ender
Volo
代码打包
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 模块化和打包方案收集的更多相关文章
- JS 模块化和打包方案收集
1.这里想讨论的是拆分规则,不是在问哪个工具怎么使用.2.这里没有在想找正确答案,因为感觉这个问题要结合具体业务场景. 随着项目开发越来越大,一开始代码全打包到一个文件的方式,让文件越来越大,接下来要 ...
- js模块化/js模块加载器/js模块打包器
之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...
- 闲聊——浅谈前端js模块化演变
function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...
- 一览js模块化:从CommonJS到ES6
本文由云+社区发表 模块化是指把一个复杂的系统分解到一个一个的模块. 模块化开发的优点: (1)代码复用,让我们更方便地进行代码管理.同时也便于后面代码的修改和维护. (2)一个单独的文件就是一个模块 ...
- 关于 JS 模块化的最佳实践总结
模块化开发是 JS 项目开发中的必备技能,它如同面向对象.设计模式一样,可以兼顾提升软件项目的可维护性和开发效率. 模块之间通常以全局对象维系通讯.在小游戏中,GameGlobal 是全局对象.在小程 ...
- 面试指南」JS 模块化、组件化、工程化相关的 15 道面试题
JS 模块化.组件化.工程化相关的 15 道面试题 1.什么是模块化? 2.简述模块化的发展历程? 3.AMD.CMD.CommonJS 与 ES6 模块化的区别? 4.它们是如何使用的? 5.exp ...
- ReactJS webpack实现JS模块化使用的坑
从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...
- js模块化历程
这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出 ...
- 探索javascript----浅析js模块化
引言: 鸭子类型: 面向对象的编程思想里,有一个有趣的概念,叫鸭子类型:“一只鸟走起来像鸭子.游起泳来像鸭子.叫起来也像鸭子,那它就可以被当做鸭子.也就是说,它不关注对象的类型,而是关注对象具有的行为 ...
随机推荐
- .net简单的静态页生成
1.得到实体对象model,读取模板 string htmlMaster = File.ReadAllText(HttpContext.Current.Server.MapPath("/ma ...
- CentOS6.6 搭建Zabbix_3.0
公司有下发内网监控服务器的需求 使用zabbix监控 所以这篇文章是讲述的zabbix的搭建 其实网上很多地方都有 可以参考 环境安装 系统环境: # cat /etc/redhat-release ...
- 如何查看自己电脑支持OpenGL core版本
1. 起因: 红宝书上的例子在电脑上运行后没有效果,但是怎么也找不到原因,反复对看了书上的源码和代码发现没有任何问题,但是就是没有树上写的效果 2. 思路:查看函数的说明,这里推荐使用docs.gl, ...
- Android OpenGL ES(三)OpenGL ES API 命名习惯 .
OpenGL ES是个跨平台的3D图形开发包规范,最常见的实现是采用C语言实现的,Android OpenGL ES 实现上是使用Java 语言对底层的C接口进行了封装,因此在android.open ...
- div.2/Bellovin<最长上升子序列>
题意: 序列arr[i--n];输出以a[i]为结尾的最长上升子序列.1<=n<=100000; 思路: O(n*log(n)),求最长上升子序列. #include<cstdio& ...
- iOS项目架构 小谈
层级结构,自底向上 持久层(File,Realm,SQLite)<==>网络层(相信每个公司都有自己的网络层吧)==>业务层(ViewModel)==>展示层(View,VC) ...
- 第一章C语言简介及输出函数 上机部分
第一章C语言简介及输出函数 上机1 #include "stdio.h" void main() { printf("南方学院,你好!\n"); printf( ...
- 借助XShell,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器。
rz 是将window文件传到linux服务器上,到执行rz命令的目录 sz 可以将linux文件发送到windows上,可以选择目录. https://www.google.com/ncr 登录一下 ...
- http协议--笔记
HTTP协议的缺点:1.通信使用明文(不加密),内容可能会被窃听2.不验证通信方的身份,因此有可能遭遇伪装3.无法证明报文的完整性,所以有可能已遭篡改 防止窃听保护信息的几种对策:加密技术通信的加密H ...
- 初探JavaScript魅力(二)
行为,样式,结构三者分离(javascript, css, html),不要在行间加行为,样式 样式优先级:*<标签<class<ID<行间 style与className,如 ...