javascript - ES6 导入/导出如何与 CommonJS 导出/require 一起使用

Question

有时您想要组合这些语法，最常见的是在导入使用 commonjs 语法的内容时。一些案例已经在这里讨论过:

How to correctly use ES6 "export default" with CommonJS "require"?

但肯定还有更多情况可能发生!

Answer 1

正如 @Bergi 和 @Mike 在评论中指出的那样，它如何处理 ES6 导入/导出取决于转译器(最常见的是 Babel)。几个例子，您将通过 Babel (及其标准插件)获得什么:

CommonJS 导出，ES6 导入

module.exports = 1    // a.js
import one from './a' // b.js
// one === 1

module.exports = {one: 1}  // a.js
import obj from './a'      // b.js
// obj is {one: 1}

import * as obj from './a' // b.js
// obj.one === 1 ; however, check out the 'funky stuff' below

import {one} from './a'    // b.js
// one === 1

ES6 导出，CommonJS 要求

export default 1 // a.js
const one = require('./a').default
// one === 1

export const one = 1
const one = require('./a').one
// one === 1

时髦的东西

module.exports = 1          // a.js
import * as obj from './a'  // b.js
// obj is {default: 1}

module.exports = {one: 1}   // a.js
import * as obj from './a'  // b.js
// obj is {one: 1, default: {one: 1}}