Come utilizzare correttamente ES6 "export default" con CommonJS "require"?

Question

Ho lavorato attraverso Webpack tutorial. In una delle sezioni, dà l'esempio di codice che contiene una riga di essenza a questa domanda:

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

Nella sezione successiva di detto tutorial, intitolato "Codice splitting", la classe definita sopra viene caricato su richiesta , in questo modo:

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

Purtroppo, questo codice genera un'eccezione:

Uncaught TypeError: Button is not a function 

Ora, so che il destra modo per includere il modulo ES6 sarebbe semplicemente import Button from './Components/Button'; nella parte superiore del file, ma utilizzando un costrutto come quello in qualsiasi altra parte del file rende babele una triste panda:

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

Dopo un po 'giocherellare con precedente (require.ensure()) esempio sopra, mi sono reso conto che la sintassi ES6 export default esporta un oggetto che ha la proprietà denominata default, che contiene il mio codice (la funzione Button).

ho fatto correggere l'esempio di codice rotto aggiungendo .default dopo richiedono chiamata, in questo modo:

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

... ma penso che sembra un po 'goffo ed è soggetto ad errori (avrei dovuto per sapere quale modulo utilizza la sintassi ES6 e quale utilizza il buon vecchio module.exports).

Che mi porta alla mia domanda: qual è il modo giusto per importare il codice ES6 dal codice che utilizza la sintassi CommonJS?

Answer 1

Per utilizzare export default con Babel, si può fare uno dei seguenti modi:

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

o 3:

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

Answer 2

Se qualcuno utilizzando il gulp + browserify + babelify per raggruppare js utilizzando in client-end.

Try seguente codice [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() 

Non dimenticare di installare questo pacchetto: https://www.npmjs.com/package/babel-plugin-add-module-exports