模块化规范

模块系统

requireJs

RequireJS 是一个JavaScript模块加载器，采用AMD的模块化规范。它非常适合在浏览器中使用，使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

seaJs

seaJS 是一个JavaScript模块加载器，遵循CMD规范。

eslJs

ESL是一个浏览器端、符合AMD的标准加载器，适合用于现代Web浏览器端应用的入口与模块管理。

ESL vs RequireJS

• 体积更小 (Smaller)
• 性能更高 (Higher performance)
• 更健壮 (More Robustness)
• 不支持在非浏览器端使用 (Browser only)
• 依赖模块用时定义 (Lazy define)

打包工具

webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
webpack通过配置loader的方式可以处理任意文件资源
webpack配置：

var webpack = require('webpack')

module.exports = {  
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

构建平台/工具

EDP

特点：

• 前端开发平台
• 集成项目创建、包管理、调式、构建、代码检测等前端工作流程

链接地址：http://ecomfe.github.io/edp/

FIS

特点：

• 前端构建工具
• 解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署

链接地址： http://fis.baidu.com/

Gulp

特点：

• 前端自动化构建工具
• gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

链接地址：http://www.gulpjs.com.cn/

Grunt

特点：

• 前端构建工具
• Grunt 是一个基于 task 的构建工具，依赖众多的插件进行配置组织。

链接地址：http://www.gruntjs.net/

参考资料

1.JavaScript中的各种模块化规范
2.webpack文档
3.关于 CommonJS AMD CMD UMD
4.为什么我推荐requirejs 而不是seajs?
5.esl
6.requireJs
7.seajs