import 与 require 如何浏览器实现
1 概述
现在开发中基本上都是使用 import 和 require 两种方式来进行模块发开发，虽然知道两者是不同的模块开发方式，但是开发中发现，两者可以混着用。
import Test, { fn, fn2 } from 'test'var test = require('test')
1.1 import
import 形式的是 es6 中新增的语法，大部分浏览器不支持 import ，所以要用 babel 转换成 CommonJS规范 形式的代码。
CommonJS 是一种模块化规范，浏览器本身也没有 require 这种语法，是用原生js实现的功能
1.2 require
Node中就是以CommonJS规范 为基础，可以直接使用require，但是客户端中却没有 require 和 module 语法。
babel对require是不进行处理的
一般的打包工具都会做好处理，例如fis、webpack。
2 babel对import的处理
先不讨论浏览器中是如何实现 CommonJS规范 的（后面会简单描述一下），仅仅说下 babel 对 import 的处理。
2.1 babel对require是不进行处理的
babel编译中，babel是不会对require进行处理的。
可以看到除了添加严格模式外，没有做任何的处理。
// babel编译前
var test = require('test')
module.exports = {}
// babel编译后
'use strict';
var test = require('test');
module.exports = {};
2.2 babel对import做了什么
因为babel对import有处理，会处理成CommonJS规范 形式的代码，所以分为两部分来分别查看
2.2.1 export
// babel编译前
export default {}
// babel编译后
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {};
/*
* exports
* {default: {} , __esModule: true}
*/
上述代码可以看出来，export default 格式被转换成 exports.default，export default是es6 import抛出方式，而 exports.default 是 CommonJS规范 中常用的方式。所以babel是将es6中的import转换成CommonJS规范 格式。
更加详细的看一下
其中 export 的变量都分别挂载到 exports 对用的变量上， 如
export default 对应 exports.default
export function fn 对应 exports.fn
export const msg 对应 exports.msg
同时还加了一个标记变量 __esModule 来描述这个 exports 是由 es6 export 转换过来的
// babel编译前
export default {
}
export const msg = 'msg'
export function fn () {
console.log('function')
}
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.fn = fn;
exports.default = {};
var msg = exports.msg = 'msg';
function fn() {
console.log('function');
}
/*
* exports
* {default: {} ,msg: 'msg', fn: fn, __esModule: true}
*/
2.2.2 import
已经知道了如何抛出 esModule，那么现在看一下如何引入 esModule
// babel编译前
import Test, {msg, fn} from 'test'
console.log(Test)
console.log(msg)
console.log(fn)
// babel编译后
'use strict';
var _test = require('test');
var _test2 = _interopRequireDefault(_test);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log(_test2.default);
console.log(_test.msg);
console.log(_test.fn);
前文中已经说了 babel 对 require 不做处理，但对es6 import 做了处理。
es6 import也被处理成CommonJS规范但是和
require不太一样的地方在于，他在变成require形式后，没有直接使用，而是用函数_interopRequireDefault再次处理了一遍_interopRequireDefault函数的作用是为了兼容和区分commonjs exports和es6 export如果
'test'实际是commonjs exports形式的，会转换成{default: require('test')}因为
es6 import实际是引入不同的key值， 如默认的是default
3 浏览器支持CommonJS
虽然 babel 将 import 转换成 CommonJS规范 形式的，但是浏览器本身没有 module export require global 这些变量，并没有原生的支持CommonJS规范 ，所以需要一些库来做这些支持。
在webpack打包中就会有一套自己的loader专门来处理这些。
这里先不用webpack来讲解，用活动中比较简洁的 fis 和 mod.js 来分析下如何实现的
3.1 fis
以fis为例，fis会将设置了 isMode: true 的js文件处理一次，大致处理成为
// 被处理后的app.js
define('xx/xx/xx/app', function(require, exports, module) {
var test = require('xx/xx/xx/test')
module.exports = {}
})
这样就可以看到了虽然浏览器没有module export require 这些变量，但是在这些变量通过参数传递进来，就能正常的在函数内部访问到。
可以看出来被 fis 编译后的js文件，实际是执行了一个 define 函数，参数第一个为id，第二个为一个将原来代码包装过得函数。
竟然 define 是一个执行函数，而且 module export require 被当做参数传递进来，那么久一定有地方来声明这些变量，这个就是下面要引入的一个库mod.js .
3.2 mod.js
// 简化
(function (global) {
var factoryMap = {};
define = function (id, factory) {}
require = function (id) {}
global.define = define
global.require = require
})(window)
通过上面的代码可以看出来，已经在全局实现了 define 和 require 方法，在页面中引入这个js文件后，后面的js文件都可以调用到。
3.2.1 define
define 的作用是将在 id 和 factory 对应的存储到 factoryMap 中。
这样当页面加载完模块文件之后，factoryMap 存储了所有模块的 id 和对应的函数。
define = function (id, factory) {
if (typeof id !== 'string') return
id = id.replace(/\.js$/i, '');
factoryMap[id] = factory;
var queue = loadingMap[id];
if (queue) {
for (var i = 0, n = queue.length; i < n; i++) {
queue[i]();
}
delete loadingMap[id];
}
};
3.2.2 require
在3.2.1中已经生成了所有模块集合的 factoryMap ，require的做用就是从 factoryMap 获取对应的factory并执行。
注
1.如果已经require过，那么modulesMap会有对应的返回值，就不需要再次执行factory
var mod = modulesMap[id];
if (mod) {
return mod.exports;
}
- 而
factory.apply(mod, [require, mod.exports, mod])的目的就是，执行factory的时候将moduleexportrequire这些变量传递近factory函数中。结合define部分的分析。
下面就是mod.js关于require的源码
require = function (id) {
// compatible with require([dep, dep2...]) syntax.
if (id && id.splice) {
return require.async.apply(this, arguments);
}
id = require.alias(id);
var mod = modulesMap[id];
if (mod) {
return mod.exports;
}
//
// init module
//
var factory = factoryMap[id];
if (!factory) {
throw '[ModJS] Cannot find module `' + id + '`';
}
mod = modulesMap[id] = {
exports: {}
};
//
// factory: function OR value
//
var ret = (typeof factory === 'function') ? factory.apply(mod, [require, mod.exports, mod]) : factory;
if (ret) {
mod.exports = ret;
}
return mod.exports;
};
