2016-07-06 54 views
1

我正在使用Webpack捆绑我的ReactJS应用程序。Webpack不捆绑依赖关系JS文件中导入的节点模块

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'] 
       } 
      } 
     ] 
    } 
}; 

当我るn webpack-dev-server --progress --colors我在浏览器中收到错误“React is not defined”但如果我直接在index.js中导入React,那么错误不会发生。 为什么Webpack在helloworld.js文件中引用的bundle中没有包含React?

回答

1

那么webpack只会尝试通过读取其中的依赖关系并解析它们来呈现特定元素来捆绑各个模块。现在,而捆绑

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

ReactDOM试图执行React.createElement(_Helloworld2.default, { name: 'World' }), document.getElementById('app')功能需要作出反应,依赖的是不存在在你的index.js文件,以便它给出了一个错误,解决问题,当你在index.js文件import React。我希望我能够解释和我的答案可以帮助你。

1

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