import,export default,exports,require,module.exports终于不糊了

一、使用

Require: node 和 es6

export,export default ,import : es6

module.exports ,exports : node

二、node的module

node中遵循的是commonJs规范。

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。

(1)exports
  • exports使用方法
function sayHi() {
    console.log('hi');
}
exports.sayHi = sayHi;

引入

let sayHiModule = require('./test.js');
console.log(sayHiModule);
// { sayHi: [Function: sayHi] }
(2)module.exports
  • module.exports使用方法
function sayHi() {
    console.log('hi');
}
module.exports = sayHi;

引入

let sayHiModule = require('./test.js');
console.log(sayHiModule);
// function sayHi() {
//    console.log('hi');
// }
(3)对比现象

a) 使用exports时,打印出module.exports和exports,二者是相等的

function sayHi() {
    console.log('hi');
}
exports.sayHi = sayHi;

console.log(module.exports);
// { sayHi: [Function: sayHi] }
console.log(exports);
// { sayHi: [Function: sayHi] }
console.log(module.exports === exports);
// true

b) 使用module.exports时,打印出module.exports和exports,二者居然又不相等了

function sayHi() {
    console.log('hi');
}
module.exports = sayHi;

console.log(module.exports);
// [Function: sayHi]
console.log(exports);
// {}
console.log(module.exports === exports);
// false
(4)原因

a) Node为每个模块提供一个exports变量,指向module.exports。这等同在每个模块头部,有一行这样的命令。

var exports = module.exports;

也就意味着,他俩指向同一个内存区域。

b) 什么也不做, 先打印出module.exports和exports,会发现他俩都是空对象。

console.log(module.exports);
// {}
console.log(exports);
// {}

所以(3)中的 a) exports. sayHi=sayHi使这个空对象多了个sayHi的属性。
而(3)中的 b) module.exports = sayHi;使得module.exports的内存指向了另一个内存区域,所以module.exports变了,而exports还是那个空对象。

(5)require

那么require到底用的是哪个?

其实从上面使用方法的例子里也能看出来,require引的是module.exports指向的那块内存。

看文档发现require居然还根据路径缓存,见下面的栗子

let sayHiModule = require('./test.js');
let sayHiModule2 = require('./test.js').name = 'Jack';
console.log(sayHiModule);
// { sayHi: [Function: sayHi], name: 'Jack' }

三、es6的module

上面提到,commonJs的module是一个对象,运行时加载。

而es6的module不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入,在编译时就完成模块加载。

(1)export

下面2种写法等价。

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。(所以export后必须加上大括号)

(2)import

同样import也要对应上export的对外接口。

// main.js
import { firstName, lastName, year } from './profile.js';

由于是静态加载,必须在最外层,不能条件加载。

(3)export default

export default可以用来解决接口名一一对应的麻烦。

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

上面的栗子,用了export default,import的时候就可以直接命名,而不需要用{}去对应上export的接口。

export default其实是输出了一个叫default的变量,所以export default不能接变量声明语句。

四、babel将es6模块转为commonJs规范

贴一个小网站,大家可以自己试试。

(1)export default
// es6
export default function() {
  console.log('hi');
}

// 转完
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = _default;

function _default() {
  console.log('hi');
}
(2)export
// es6
let a = 'hi';
export {a};

// 转完
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.a = void 0;
let a = 'hi';
exports.a = a;
(3)import
// es6
import a from 'a';

// 转完
"use strict";

var _a = _interopRequireDefault(require("a"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
(4)结论

a)对于导出:
babel会把export {a} 变成 exports.a = .....;
把export default 变成 exports.default = ....;
并把exports.__esModule 变成 true,表明它是从es6转成commonJs的。

b)对于引入

import a from 'a'
这句本意上是引入a导出对象的default属性。
而转换后var a = require(./a.js)得到的却是整个对象

所以babel有个_interopRequireDefault函数,其实说白了就是个if else:
如果有__esModule,代表obj本来就是从es6转成commonJs的,直接返回obj;
如果没有__esModule,代表obj本来就是commonJs规范,所以要给它包一层default。

(5)babel的按需引入插件做了什么(babel-plugin-component)

a)没有按需的情况下,引入一个button,转成commonJs其实就把库全部引入了

// es6
import {Button} from 'element-ui';

// babel转完
"use strict";

var _elementUi = require("element-ui");

b)加上babel-plugin-component之后,按官方给的用法如下

  // babel配置
  plugins: [
        [
            'component',
            {
                libraryName: 'element-ui',
                styleLibraryName: 'theme-chalk'
            }
        ],
  ]

插件就会把

import { Button } from 'components'

转成

var button = require('components/lib/button')
require('components/lib/styleLibraryName/button.css')

这样就达到了按需引入。

五、webpack模块化做了什么

戳这里

参考

终于讲清楚了nodejs中exports和module.exports的区别

import、require、export、module.exports 混合使用详解

CommonJS规范

你可能感兴趣的:(import,export default,exports,require,module.exports终于不糊了)