Wie spielt der ES6-Import/Export zusammen mit CommonJS-Exporten/erfordert

Question

Manchmal möchten Sie diese Syntaxen kombinieren, meistens wenn import etwas, das die commonjs-Syntax verwendet. Einige Fälle wurden bereits zum Beispiel diskutiert hier:

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

aber es gibt sicherlich mehr Situationen, die auftreten können!

Answer 1

Wie @Bergi und @Mike in den Kommentaren gezeigt haben, liegt es am Transpiler (am häufigsten Babel), wie er ES6-Import/-Export bewältigt. Ein paar Beispiele, was werden Sie mit Babel (mit Standard-Plugins) bekam:

Commonjs Export, Import 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 Export, Commonjs erfordern

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

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

Funky Sachen

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}}