webpack require.ensure Fehler mit Javascript

Question

Ich versuche, dieses Tutorial zu folgen, auf webpack

http://blog.madewithlove.be/post/webpack-your-bags/

Ich wurde angewiesen, unterhalb eines src/index.js mit Code zu erstellen:

if (document.querySelectorAll('a').length) { 
    require.ensure([],() => { 
     const Button = require('./Components/Button'); 
     const button = new Button('google.com'); 

     button.render('a'); 
    }); 
} 

Wenn ich das Webpack ausführe und dann die Webseite anzeigen, melden meine Chrome-Entwicklertools den folgenden Fehler in der Konsole:

Was ist los? Wie repariere ich?

Answer 1

Ich fand die Antwort. Ich ersetzte

 const button = new Button('google.com'); 

mit

 const button = new Button.default('google.com'); 

Ich verstehe nicht, warum es funktioniert, aber es funktioniert ... Ich habe nur Objekteigenschaften zufällig Inspektion und versuchen, verschiedene Dinge, und dies schien alles zu beheben.

Answer 2

die require.ensure und require sind ES5 Commonjs Muster, sieht es aus wie Ihr ./Components/Button Modul höchstwahrscheinlich wird mit export default Syntax von ES6 exportieren, deshalb:

import Button from './Components/Button' in ES6 ist die gleiche wie require('./Components/Button').default in ES5

in der Zukunft anstelle von require.ensure können Sie System.import in Webpack 2,0

https://webpack.github.io/docs/roadmap.html#2

verwenden