使用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({
	render : function(){
		return (
			<div>
				<helloWorldDisplay/>
			</div>
		);
	}
});

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

• helloWorldDisplay.jsx

import React from 'react';

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

• main.js文件

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

当我的bundle.js由webpack创建时，它看起来像这样

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

	import helloWorldBox from './helloWorldComponent/helloWorldBox.jsx';
	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文件