Question

我正在使用Webpack捆绑我的ReactJS应用程序。

helloworld.js

import React from 'react';

export default class HelloWorld extends React.Component {
    render() {
        return <h2>Hello {this.props.name}!</h2>;
    }
}

index.js

import ReactDOM from 'react-dom';
import HelloWorld from './helloworld';

ReactDOM.render(<HelloWorld name="World" />,
    document.getElementById('container'));

webpack.config.js

module.exports = {
    entry: './index.js',
    output: 'bundle.js',
    module: {
        loaders: [
            {
                test: /(\.js|\.jsx)/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

当我运行webpack-dev-server --progress --colors时，我在浏览器中收到错误＆＃34; React未定义＆＃34; 但是如果我直接在索引中导入React。然后错误没来了。 为什么Webpack在helloworld.js文件中引用时不包含React？

Answer 1

webpack只是尝试通过读取其中的依赖项并将其解析为呈现特定元素来捆绑各个模块。现在捆绑时

ReactDOM.render(<HelloWorld name="World" />,
    document.getElementById('container'));

ReactDOM尝试执行React.createElement(_Helloworld2.default, { name: 'World' }), document.getElementById('app')函数，该函数需要React作为index.js文件中不存在的依赖项，因此当您{{1} import React时出现错误并解决问题文件。我希望我能够解释，我的回答可以帮助你。

Answer 2

您缺少import React from 'react';声明。每次在文件中编写一些JSX时都需要它，因为它转换为React.createElement(..)函数调用。

Webpack不捆绑在依赖JS文件中导入的节点模块

2 个答案: