Wie verwendet man ES6 "Export default" korrekt mit CommonJS "require"?

Question

Ich habe durch Webpack tutorial gearbeitet. In einem der Abschnitte, gibt es dem Codebeispiel, das eine Zeile der Essenz auf diese Frage enthält:

export default class Button { /* class code here */ } 

Im nächsten Abschnitt des Tutorials, mit dem Titel „Code-Splitting“, definiert die Klasse oben bei Bedarf geladen wird , wie folgt aus:

require.ensure([],() => { 
    const Button = require("./Components/Button"); 
    const button = new Button("google.com"); 
    // ... 
}); 

Leider führt dieser Code eine Ausnahme:

Uncaught TypeError: Button is not a function 

Nun, ich weiß, dass die Recht Weg ES6 Module umfassen würde import Button from './Components/Button'; am Anfang der Datei zu einfach sein, aber ein Konstrukt wie die irgendwo sonst in der Datei macht babel einen traurigen Panda:

SyntaxError: index.js: 'import' and 'export' may only appear at the top level 

Nach einigen Hantieren mit früherem (require.ensure()) Beispiel oben erkannte ich, dass ES6 export default Syntax ein Objekt exportiert, das die Eigenschaft default hat, die meinen Code enthält (die Button-Funktion).

Ich habe den gebrochenen Codebeispiel beheben, indem .default nach Aufruf erfordern anhängt, wie folgt aus:

const Button = require("./Components/Button").default; 

... aber ich denke, es ist ein bisschen unbeholfen aussieht und es ist fehleranfällig (Ich würde um zu wissen, welches Modul die ES6-Syntax verwendet und welches gute alte verwendet module.exports).

Was bringt mich zu meiner Frage: Was ist der richtige Weg, um ES6-Code aus Code, der CommonJS-Syntax verwendet, zu importieren?

Answer 1

verwenden export default mit Babel, können Sie 1 der folgenden Aktionen ausführen:

1. require("myStuff").default
2. npm install babel-plugin-add-module-exports --save-dev

oder 3:

//myStuff.js 
var thingToExport = {}; 
Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 
exports["default"] = thingToExport; 

Answer 2

Wenn jemand die Verwendung von gulp + browserify + babelify um js zu bündeln Verwenden in Client-End.

Versuchen folgenden Code [gulpfile.js]:

browserify({ 
    entries: "./ui/qiyun-ui/javascripts/qiyun-ui.src.js", 
    standalone: "qyUI" // To UMD 
}) 
.transform(babelify, { 
    presets: ["env"], 
    plugins: ["add-module-exports"] // export default {} => module.exports = 
            exports['default']; 
}) 
.bundle() 

Vergessen Sie nicht, dieses Paket zu installieren: https://www.npmjs.com/package/babel-plugin-add-module-exports