使用Webpack和Babel加載ES6模塊問題

Question

由於某種原因，我編譯的jsx模塊腳本不編譯。

這裏是目錄結構

• DIST
  • bundle.js
• node_modules
• 腳本
  • helloWorldComponent
    • helloWorldBox.jsx
    • helloWorldDisplay.jsx
  • main.js
• 的index.html
• 的package.json
• webpack.config.js

這是我的2個jsx文件

• helloWorldBox.jsx

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import helloWorldDisplay from './helloWorldDisplay.jsx'; 
 

 
var helloWorldBox = React.createClass({ 
 
\t render : function(){ 
 
\t \t return (
 
\t \t \t <div> 
 
\t \t \t \t <helloWorldDisplay/> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}); 
 

 
ReactDOM.render(<helloWorldBox/>, document.getElementById('output'));

• helloWorldDisplay.jsx

import React from 'react'; 
 

 
var helloWorldDisplay = React.createClass({ 
 
\t render : function(){ 
 
\t \t return (
 
\t \t \t <div> 
 
\t \t \t Hello World 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
});

• main.js文件

import helloWorldBox from './helloWorldComponent/helloWorldBox.jsx'; 
 
import helloWorldDisplay from './helloWorldComponent/helloWorldDisplay.jsx';

當我bundle.js被通過的WebPack創建它看起來像這樣

/************************************************************************/ 
 
/******/ ([ 
 
/* 0 */ 
 
/***/ function(module, exports) { 
 

 
\t import helloWorldBox from './helloWorldComponent/helloWorldBox.jsx'; 
 
\t import helloWorldDisplay from './helloWorldComponent/helloWorldDisplay.jsx'; 
 

 
/***/ } 
 
/******/ ]);

這裏是webpack.config.js文件

var path = require('path'); 
 
var webpack = require('webpack'); 
 
    
 
module.exports = { 
 
    entry: './scripts/main.js', 
 
    output: { path: __dirname + '/dist', filename: 'bundle.js' }, 
 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.jsx$/, 
 
     loader: 'babel-loader', 
 
     exclude: /(node_modules|bower_components)/, 
 
     query: { 
 
      presets: ['es2015', 'react'] 
 
     } 
 
     } 
 
    ] 
 
    }, 
 
};

Answer 1

import React from 'react'; 

var helloWorldDisplay = React.createClass({ 
    render : function(){ 
     return (
      <div> 
       Hello World 
      </div> 
     ); 
    } 
}); 

export default helloWorldDisplay 

添加出口helloworldDisplay文件