Question

您好，我无法将组件从一个jsx导入另一个jsx。我使用django framework来提供我的网页文件，并且我已经下载了所有必要的工具（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'] 
    }   
}

Answer 1

尝试替换此

                loader: 'babel-loader',

带

                loader: 'babel',

在webpack config

中

PS：这应该是一个评论，但不是足够的代表

反应中导入组件的麻烦

1 个答案: