Webpack-Klassenpriorität

Question

Ich benutze ein Webpack (mit ES5 to ES6 transpile) und versuche bundle.js zu erstellen. aber ich erhalte eine Fehlermeldung in Chrome: index.js: 3 Uncaught Reference: Gitter nicht definiert ist

Mein Einspeisepunkt (index.js):

require('./Grid'); 
new Grid(); 

Meine Klasse (Grid.js)

export class Grid 
{ 
    constructor() 
    { 
     alert('Hello World'); 
    } 
} 

Webpack Config:

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    context: path.join(__dirname, "src/js"), 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: __dirname + '/src/js/index.js', 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015'] 
       } 
      } 
     ] 
    }, 
    output: { 
     path: __dirname + "/dist/js/", 
     filename: "bundle.js" 
    } 
}; 

Was ist los?

Answer 1

Wenn Sie Babel export, müssen Sie vorsichtig sein require verwenden. Dies ist, wie Commonjs in einigen verschiedenen Situationen funktioniert:

// Classic CommonJS default export 
module.exports = Grid; 
// Import with one of: 
import Grid from './Grid.js'; 
const Grid = require('./Grid.js'); 

// Babel ES6 default export 
export default class Grid {} 
// Import with one of: 
import Grid from './Grid.js'; 
const Grid = require('./Grid.js').default; // Babel exports it as named property default 
// The export is more or less equivalent to (but you shouldn't write this yourself) 
module.exports = { default: Grid, __esModule: true }; // (__esModule is a Babel internal) 

// Named CommonJS/ES6 export: 
module.exports = { Grid: Grid }; 
// Equivalent to 
export class Grid {} // no default = export named 
// or 
export { Grid }; // with Grid created earlier 
// Import with one of: 
import { Grid } from './Grid.js'; 
const Grid = require('./Grid.js').Grid; 

Das mit der Einführung von Babel 6 geändert wurde, wenn ich mich nicht irre. Babel 5 exportierte die Standardeigenschaften auf die gleiche Weise, wie sie der klassische CommonJS standardmäßig exportiert. Um die ES6-Spezifikation besser zu implementieren, wurde sie geändert.

Answer 2

Die folgenden zwei Änderungen schien das Problem für mich zu beheben:

1. Grid.js: export class Grid...-module.exports = class Grid... ändern.

2. index.js: Ändern require('./Grid');-entwedervar Grid = require('./Grid');oderimport Grid from './Grid';.