Javascript 捆绑的JS上需要未定义的错误

我是Django和ReactJS的新手，尝试使用本教程将一个简单的JSX代码编译成JS： 不起作用，所以我使用

npm run dev

进行编译，现在它起作用了，但在浏览器控制台中出现错误：未捕获引用错误：未定义反应 这是我的webpack.config.js

    var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var nodeExternals = require('webpack-node-externals');


module.exports = {
    //the base directory (absolute path) for resolving the entry option
    context: __dirname,
    //the entry point we created earlier. Note that './' means
    //your current directory. You don't have to specify the extension  now,
    //because you will specify extensions later in the `resolve` section
    entry: './assets/js/index',

    output: {
        //where you want your compiled bundle to be stored
        path: path.resolve('./assets/bundles/'),
        //naming convention webpack should use for your files
        filename: '[name]-[hash].js',
    },
    target: 'node', // in order to ignore built-in modules like path, fs, etc.
    externals: {
    react: 'react'
}, // in order to ignore all modules in node_modules folder

    plugins: [
        //tells webpack where to store data about your bundles.
        new BundleTracker({filename: './webpack-stats.json'}),
        //makes jQuery available in every module
        new webpack.ProvidePlugin({
            //React: "react",
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],

    module: {
        loaders: [
            //a regexp that tells webpack use the following loaders on all
            //.js and .jsx files
            {test: /\.jsx?$/,
                //we definitely don't want babel to transpile all the files in
                //node_modules. That would take a long time.
                /*exclude: /node_modules/,*/
                //use the babel loader
                loader: 'babel-loader',
                query: {
                    //specify that we will be dealing with React code
                    presets: ['react']
                }
            }
        ]
    },

    resolve: {
        //tells webpack where to look for modules
        modulesDirectories: ['node_modules'],
        //extensions that should be used to resolve modules
        extensions: ['', '.js', '.jsx']
     }
    }

和assets/bundles/index.js

    var React = require('react')
    var ReactDOM = require('react-dom')
    //snaha//
    var BooksList = React.createClass({
    loadBooksFromServer: function(){
        console.log(123454657);
        $.ajax({
            url: this.props.url,
            datatype: 'json',
            cache: false,
            success: function(data) {
                this.setState({data: data});
            }.bind(this)
        })
    },

    getInitialState: function() {
        return {data: []};
    },

    componentDidMount: function() {
        this.loadBooksFromServer();
        setInterval(this.loadBooksFromServer,
                    this.props.pollInterval)
    },
    render: function() {
        if (this.state.data) {
            console.log('DATA!')
            var bookNodes = this.state.data.map(function(book){
                return <li> {book.title} </li>
            })
        }
        return (
            <div>
                <h1>Hello React!</h1>
                <ul>
                    {bookNodes}
                </ul>
            </div>
        )
      }
   })

     ReactDOM.render(<BooksList url='/api/' pollInterval={1000} />,
    document.getElementById('container'))

var React=require（'React'））
var ReactDOM=require（'react-dom'））
//斯纳哈//
var BooksList=React.createClass({
loadBooksFromServer:函数（）{
控制台日志（123454657）；
$.ajax({
url:this.props.url，
数据类型：“json”，
cache:false，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此）
})
},
getInitialState:函数（）{
返回{data:[]}；
},
componentDidMount:function（）{
这个.loadBooksFromServer（）；
setInterval（this.loadBooksFromServer，
这个.props.pollInterval）
},
render:function（）{
if（this.state.data）{
console.log（'DATA！'）
var bookNodes=this.state.data.map（函数（book）{
return
{book.title}
})
}
返回(
你好，反应！

{bookNodes}

)
}
})
ReactDOM.render（，
document.getElementById（'container'））

和模板/body.html

    {% load render_bundle from webpack_loader %}
    <!doctype html>
    <html>
    <head>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
     <meta charset="UTF-8">
     <title>Hello React
        {% block content %}
            {{ id }}
        {% endblock %}
     </title>
      </head>
      <body>
     <div id="container"></div>
      {% render_bundle 'main' %}
      </body>
      </html>

{%loader\u bundle from webpack\u loader%}
你好，反应
{%block content%}
{{id}
{%endblock%}
{%render_bundle'主“%”

---

我遗漏了什么

您能看看是否安装了所有要求吗

查看package.json内部。如果您确实运行了，则应该在需求中记录响应

npm install

如果你没有，那就跑吧

npm install react --save

ps：在我的选项中，如果您正在运行Webpack，请尝试将babel添加到Webpack预设中，并在ES2015规范中编写javascript。

最后我解决了这个问题！ 问题是：它试图获取变量react，而浏览器上的as react.js提供变量react！ 因此，我将webpack.config.js的外部更改为

    externals: {
    React: 'react'
},

解决了这个问题

面临的下一个问题：

“未定义进程”

解决方案：添加

var env = process.env.WEBPACK_ENV;

到webpack.config.js的顶部 及

进入model.export的插件部分

因此，最终的webpack.config.js将是：

    var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var nodeExternals = require('webpack-node-externals');
var env = process.env.WEBPACK_ENV;


module.exports = {
    //the base directory (absolute path) for resolving the entry option
    context: __dirname,
    //the entry point we created earlier. Note that './' means
    //your current directory. You don't have to specify the extension  now,
    //because you will specify extensions later in the `resolve` section
    entry: './assets/js/index',

    output: {
        //where you want your compiled bundle to be stored
        path: path.resolve('./assets/bundles/'),
        //naming convention webpack should use for your files
        filename: '[name]-[hash].js',
    },
    target: 'node', // in order to ignore built-in modules like path, fs, etc.
    externals: {
    React: 'react'
}, // in order to ignore all modules in node_modules folder

    plugins: [
        //tells webpack where to store data about your bundles.
        new BundleTracker({filename: './webpack-stats.json'}),
        //makes jQuery available in every module
        new webpack.ProvidePlugin({
            //React: "react",
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
         new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
         new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"production"'
      }
    })
    ],

    module: {
        loaders: [
            //a regexp that tells webpack use the following loaders on all
            //.js and .jsx files
            {test: /\.jsx?$/,
                //we definitely don't want babel to transpile all the files in
                //node_modules. That would take a long time.
                /*exclude: /node_modules/,*/
                //use the babel loader
                loader: 'babel-loader',
                query: {
                    //specify that we will be dealing with React code
                    presets: ['react']
                }
            }
        ]
    },

    resolve: {
        //tells webpack where to look for modules
        modulesDirectories: ['node_modules'],
        //extensions that should be used to resolve modules
        extensions: ['', '.js', '.jsx']
    }
}

---

现在享受反应吧！快乐编码：-）

是的，npm在那里，react也在那里。您能给我一份关于weback、babel、es2015等的清晰文档吗？目前我对所有这些都不清楚。天哪，这是一次痛苦的经历…颠倒

外部属性的顺序

修复了通过

单独加载库时模块未定义的问题

    var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var nodeExternals = require('webpack-node-externals');
var env = process.env.WEBPACK_ENV;


module.exports = {
    //the base directory (absolute path) for resolving the entry option
    context: __dirname,
    //the entry point we created earlier. Note that './' means
    //your current directory. You don't have to specify the extension  now,
    //because you will specify extensions later in the `resolve` section
    entry: './assets/js/index',

    output: {
        //where you want your compiled bundle to be stored
        path: path.resolve('./assets/bundles/'),
        //naming convention webpack should use for your files
        filename: '[name]-[hash].js',
    },
    target: 'node', // in order to ignore built-in modules like path, fs, etc.
    externals: {
    React: 'react'
}, // in order to ignore all modules in node_modules folder

    plugins: [
        //tells webpack where to store data about your bundles.
        new BundleTracker({filename: './webpack-stats.json'}),
        //makes jQuery available in every module
        new webpack.ProvidePlugin({
            //React: "react",
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
         new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
         new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"production"'
      }
    })
    ],

    module: {
        loaders: [
            //a regexp that tells webpack use the following loaders on all
            //.js and .jsx files
            {test: /\.jsx?$/,
                //we definitely don't want babel to transpile all the files in
                //node_modules. That would take a long time.
                /*exclude: /node_modules/,*/
                //use the babel loader
                loader: 'babel-loader',
                query: {
                    //specify that we will be dealing with React code
                    presets: ['react']
                }
            }
        ]
    },

    resolve: {
        //tells webpack where to look for modules
        modulesDirectories: ['node_modules'],
        //extensions that should be used to resolve modules
        extensions: ['', '.js', '.jsx']
    }
}