关于模块导入导出的问题

#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 已经明确了，commonjs 和 es6 模块不得混用。也就是说，不能用 import 命令去加载 commonjs 模块。