Webpackクラスの優先度

Question

webpack（ES5からES6への移行）を使用してbundle.jsを作成しようとしています。 は、しかし、私はChromeでエラーメッセージが表示されます：index.js：3キャッチされないにReferenceError：グリッドは

マイエントリポイント（index.js）が定義されていません。

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

マイクラスを （Grid.js）

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

WebPACKのコンフィグ：

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

どうしたのですか？

Answer 1

、あなたはrequireを使用して注意する必要があります。私は間違っていない場合、これはバベル6の導入により変更された

// 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; 

：CommonJSは、いくつかの異なる状況でどのように動作するかです。 Babel 5は、古典的なCommonJSがデフォルトのエクスポートを行うのと同じ方法でデフォルトプロパティをエクスポートしました。 ES6仕様をよりよく実装するために、変更されました。

Answer 2

次の二つの変更は私のために問題を解決するように見えた：

1. Grid.js：module.exports = class Grid...にexport class Grid...を変更します。

2. index.js：require('./Grid');からvar Grid = require('./Grid');またはimport Grid from './Grid';のいずれかを変更します。あなたはバベルのexportを使用する場合