关于模块导入导出的问题

#ES6-模块加载-CommonJS-模块

使用 webpack 打包出来的结果和书中不一致。

环境

"webpack": "^4.41.2",
"webpack-cli": "^3.3.9"

问题 模块使用 module.exports = xx 导出,在另一个模块导入的时候,下面两种导入的结果是一致的

// mod.js
module.exports = 'xx'
// app.js
import mod1 from './mod'
import * as mod2 from './mod'
console.log(mod1)
console.log(mod2)
// xx
// xx

阮老师的代码中是这么写的

// c.js
module.exports = function two() {
return 2;
};
// es.js
import foo from './c';
foo(); // 2
import * as bar from './c';
bar.default(); // 2
bar(); // throws, bar is not a function

而下面的结果和书中类似

// mod.js
export default 'xx'
// app.js
import mod1 from './mod'
import * as mod2 from './mod'
console.log(mod1)
console.log(mod2)
// xx
// Module {default: "xx", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

上面的结果说明,webpack 处理的时候,

  • module.exports 导出的,import x from 'mod'import * as x from 'mod' 相同

  • export default 导出的,import x from 'mod'import * as x from 'mod' 不同,后者是整个模块的内容

阮老师警告:这部分过时了,Node.js 已经明确了,commonjses6 模块不得混用。也就是说,不能用 import 命令去加载 commonjs 模块。