初探webpack的导入导出

前言

之前在快手面试时，面试官问到了esmodule和commonjs两种方式下webpack的导入导出解析策略，然后不出意外地，我被问懵了。于是做了一些简单的小实验，之后可能会深入源码层面对这些现象做一个解析。

1.ES6导入导出方式

// module.js
export let a = 1 //具名导出
let b = 2
export default b // 默认导出
// index.js
import b, { a } from './module'
console.log(a + b)

我们将模块整个导出来看看

import * as module from './module'
console.log(module);
/* {a: 1
default: 2
Symbol(Symbol.toStringTag): "Module"
__esModule: true
}*/

可以看到，这种命名空间的导入方式会将整个模块导入进来，如果模块内有默认导出则会以default的方式出现，而为了防止命名冲突，default被设成了关键字。

顺便说一下Symbol(Symbol.toStringTag)这个属性

class ValidatorClass {
  [Symbol.toStringTag] = 'Validator'
  get [Symbol.toStringTag]() {
    return "Validator";
  }
}
console.log(Object.prototype.toString.call(new ValidatorClass())); // [object Validator]

当面试官问到获取对象类型的题目时又有新的东西能吹了（误）。

2.CommonJS

使用commonjs的require返回的是一个js对象

// module.js
exports.someValue = 42;
// index.js
const module = require('./module')
console.log(module);
/*{someValue: 42}*/

3.混合使用es语法和commonjs语法

es引入common导出

// module.js
module.exports = {
  someValue: 42
};
// index.js
import * as module from './module'
// 或者 import module from './module' 结果是一样的
console.log(module);
/*{someValue: 42}*/

可以看出，如果导出是module.export的话，不论怎么导入，都是一个普通js对象。

如果采用下面这种方式的具名导入，则会额外将default值也初始化为本对象。也就是说，采用exports的方式导出时，在具名导入解析时，会为其适配两种es导入方式。

// module.js
exports.someValue = 42;
// index.js
import * as module from './module'
console.log(module);
/* {default: {someValue: 42}
someValue: (...)
Symbol(Symbol.toStringTag): "Module"
__esModule: true
}*/

common引入es导出

在这种情景下，const ...= require(...)可以等同于import * as ... from '...'，也就是会被当成具名引入解析。

// module.js
export let someValue = 42;
// index.js
const module = require('./module')
console.log(module);
/* {someValue: 42
Symbol(Symbol.toStringTag): "Module"
__esModule: true
}*/