(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['b'], factory); } else if (typeof module === 'object' && module.exports) { // Node. Does not work with strict CommonJS, but // only CommonJS-like environments that support module.exports, // like Node. module.exports = factory(require('b')); } else { // Browser globals (root is window) root.returnExports = factory(root.b); } }(this, function (b) { //use b in some fashion. // Just return a value to define the module export. // This example returns an object, but the module // can return a function as the exported value. return {}; }));
System.register
System.register方式设计初衷主要是为了在ES5中能够支持ES6模块语法:
import { p as q } from './dep'; var s = 'local'; export function func() { return q; } export class C { }
ES6 module
ES6中自带原生的模块语法，使用关键字”export”来导出模块的公用api：
// lib.js // Export the function export function sayHello(){ console.log('Hello'); } // Do not export the function function somePrivateFunction(){ // ... }
以关键字”import”来导入模块：
import { sayHello } from './lib'; sayHello(); // => Hello
目前各浏览器对ES6的支持度不一，因此我们现在需要使用编译器，像Babel，来将ES6的代码编译成ES5的形式。
模块加载器
一个模块加载器可以理解模块，并以固定的形式来加载模块。
模块加载器工作在运行时，流程大致如下：
你在浏览器中运行模块加载器；
你告诉模块加载器需要加载哪个主文件；
模块加载器下载并解析主文件；
模块加载器按需加载其他文件。
一些比较常见的模块加载器有：
RequireJS：以AMD风格加载模块；
SeaJS：以CMD风格加载模块；
SystemJS：以AMD, CommonJS, UMD 或者 System.register风格加载模块；
jspm：jspm基于SystemJS，是模块加载器，同时也具备浏览器端包管理功能。
模块打包
模块打包可以替换模块加载器。
然而，相比模块加载器，模块打包动作是在编译时运行的：
使用模块打包在编译期生成一个js文件；(例如bundle.js)
在浏览器中加载该文件。
截止目前，比较常用的模块打包方案有以下两种：
Browserify:为CommonJS模块打包；
Webpack: 为AMD、CommonJS、ES6模块打包。
总结
为了在现代js开发环境中更好的使用这些工具，你首先需要知道模块、模块化解决方案、模块加载、模块打包之前的区别。
模块是一段封装好的代码，可以以公用api形式导出并在其他代码中被加载和调用；
模块化解决方案或者模块化思想，实际含义是定义一个模块的语法。由于定义语法的差异，目前常用的有AMD、CMD、CommonJS、UMD等；
模块加载，在运行期解析和加载模块。常见的有RequireJS、SeaJS、SystemJS和jspm；
模块打包，其替换了模块加载的概念，在编译期间生成一个所有代码整合后的bundle.js文件。常见的有Browserify和Webpack。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家脚本之家的支持。
您可能感兴趣的文章: