import 与 require 如何在浏览器实现

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;
   }

2. 而factory.apply(mod, [require, mod.exports, mod])的目的就是，执行factory的时候将 module export require 这些变量传递近 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;
    };