带Webpack和Babel的ES6模块加载

Question

My compiled jsx module scripts are not compiling for some reason.

Here is the directory structure

• dist
  • bundle.js
• node_modules
• scripts
  • helloWorldComponent
    • helloWorldBox.jsx
    • helloWorldDisplay.jsx
  • main.js
• index.html
• package.json
• webpack.config.js

Here are my 2 jsx files

• 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 file

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

When my bundle.js gets created by webpack it looks like this

 /************************************************************************/ /******/ ([ /* 0 */ /***/ function(module, exports) { import helloWorldBox from './helloWorldComponent/helloWorldBox.jsx'; import helloWorldDisplay from './helloWorldComponent/helloWorldDisplay.jsx'; /***/ } /******/ ]); 

Here is the webpack.config.js file

 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

Add the export helloworldDisplay file