ReactDom 没有用 react 和 webpack 定义

Question

我已经按照这个简单的教程 (http://jslog.com/2014/10/02/react-with-webpack-part-1/) 开始使用 React 和 webpack，但是在尝试使用更新的语法时遇到了问题。即使用 ReactDom 调用 render 而不是已弃用的 'React.renderComponent'。

我已经跑了：

npm install --save react-dom

并添加

var ReactDom = require('react-dom')

到 index.jsx 文件并添加

'react-dom': 'ReactDom'

到 webpack.config.js 中的“外部”列表。 （我不确定这是否有必要。）

但是我得到了 javascript 错误 ReactDom is not defined。

webpack.config.js：

module.exports = {
entry: './index.jsx',
output: {
    filename: 'bundle.js', //this is the default name, so you can skip it
    //at this directory our bundle file will be available
    //make sure port 8090 is used when launching webpack-dev-server
    publicPath: 'http://localhost:8090/assets'
},
module: {
    loaders: [
        {
            //tell webpack to use jsx-loader for all *.jsx files
            test: /\.jsx$/,
            loader: 'jsx-loader?insertPragma=React.DOM&harmony'
        }
    ]
},
externals: {
    //don't bundle the 'react' npm package with our bundle.js
    //but get it from a global 'React' variable
    'react': 'React'
},
resolve: {
    extensions: ['', '.js', '.jsx']
}
}

Answer 1

如果那是您代码的精确副本，那么我认为您错误地引用了 ReactDOM - DOM 中的所有字母都需要大写，如下所示：

var ReactDOM = require('react-dom');

在你的 webpack.config.js 外部：

'react-dom': 'ReactDOM'

请注意，在设置外部时，Webpack 期望您单独加载这些库。例如，通过在您的 HTML (index.html) 中放置一个脚本标记，指向 CDN 的 react 和 react-dom 或这两个库的内部副本。所以，这也可能是您遇到问题的原因。

如果您想使用节点模块附带的 React 和 ReactDOM 版本，请忽略 Webpack 的 externals 设置。它会将 React 和 ReactDOM 与您自己的脚本捆绑在一起（使 bundle.js 更长），但它会起作用。据我所知，还有其他几种处理方式（例如使用 Express 从节点模块中公开相关文件），但似乎很多人只是将它们捆绑在一起。