在反应中导入组件时遇到问题答案

【问题标题】：trouble importing components in react在反应中导入组件时遇到问题
【发布时间】：2017-02-18 10:19:42
【问题描述】：

您好，我在将组件从一个 jsx 导入到另一个时遇到问题。我正在使用django framework 来提供我的 web 文件，并且我已经下载了所有必要的工具（npm、webpack、webpack-bundle-tracker、babel loader、django-webpack loader）。 Webpack 很好地将所有单独的 javascript 文件转换成一个包，然后我的本地 django 服务器可以在其中渲染。问题出在我尝试import a component from one jsx into another jsx 时。我没有看到任何错误，但我尝试导入的 javascript 没有加载到 django 上。

示例：File:index.js

var React = require('react')
var ReactDOM = require('react-dom')
var Body = require('./app.js')

ReactDOM.render(<Body message="Welcome to my website"/>, document.getElementById('app1'))

导入文件（与index.js在同一目录）：File:app.js

var React = require('react')
var Body = React.createClass({
    getInitialState: function() {
        return {
            bodymessage: this.props.message
        }
    },
    render: function() {
        return (
            <h1>
            {this.state.bodymessage}
            </h1>
        )
    }
})
module.exports = Body;

我的配置有问题吗？

这是我的 webpack.config.js 文件：

var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,
    entry: './assets/js/index', 

    output: {
        path: path.resolve('./assets/bundles/'), 
        filename: '[name]-[hash].js', 
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}), 
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        })
    ],

    module: {
        loaders: [
            {test: /\.jsx?$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader', 
                query: {
                    presets: ['react'] 
                }
            }
        ]
    },
    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx'] 
    }   
}

【问题讨论】：

这在使用 webpack-dev-server 时有效吗？
不，但我会下载它并尝试使用该服务器渲染 js。
还是不行。

标签： javascript django reactjs webpack babeljs

【解决方案1】：

尝试在您的 webpack 配置中将 loader: 'babel-loader', 替换为 loader: 'babel',

【讨论】：