javascript - ReactDom 没有用 react 和 webpack 定义

Question

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

我跑过:

npm install --save react-dom

并添加

var ReactDom = require('react-dom')

到index.jsx文件并添加

'react-dom': 'ReactDom'

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

但是我收到 javascript 错误 ReactDom 未定义。

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 的外部设置。它会将 React 和 ReactDOM 与您自己的脚本捆绑在一起(使 bundle.js 更长)，但它会起作用。据我所知，还有一些其他方法可以处理此问题(例如使用 Express 公开节点模块中的相关文件)，但似乎很多人只是将它们捆绑在一起。