如何让 ReactJs 与 Webpack 集成? [英] How to get ReactJs to integrate with Webpack?

问题描述

基本上，我刚刚完成了这个简单的教程，现在我想让它使用 React，这样我就能看到那个显示.

当我有这个代码时:

module.exports = "它从.js 开始工作.";

效果很好.但现在我有了这个:

var React = require('react');var ReactDOM = require('react-dom');var CommentBox = React.createClass({渲染:函数(){返回 (<div className="commentBox">你好，世界！我是一个评论框.

);}});ReactDOM.render(<评论框/>,document.getElementById('内容'));

它在第 9 行的 unexpected token < 处抱怨，我需要一个合适的加载器.有人知道这个装载机是什么吗?

谢谢

解决方案

是的，您说得对，您的 JSX 代码需要 babel-loader.另外，如果你在 React 中使用 ES6 语法，你还需要 babel-core &babel-preset-es2015 &babel-preset-react npm 的模块.之后，将它们全部包含到您的 webpack.config.js 文件中，如下所示:

module.exports = {//.. 之前的一些东西模块: {装载机:[{测试:/\.js$/,排除:/node_modules/，装载机:[巴别塔"]，查询:{ 预设:['es2015','react'] }}]}//.. 另一个东西}

我还留下了一个链接 为您提供了如何使用 ise 的教程.

希望能帮到你.

谢谢

Basically, I have just been through this simple tutorial, and now I want to get it to use React so I can see that display.

When I had this code:

module.exports = "It works from.js.";

It worked fine. But now I have this:

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

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.
        </div>
    );
  }
});
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

and it is complaining at line 9 point at the unexpected token < and I need an appropriate loader. anyone know what this loader may be?

thanks

解决方案

Yeap, you are right you need babel-loader for your JSX code. Also if you use ES6 syntax with React you also need babel-core & babel-preset-es2015 & babel-preset-react npm's modules. After that incude all of them into your webpack.config.js file as below:

module.exports = {
  //.. some stuff before
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ["babel"],
      query: { presets: ['es2015','react'] }
    }]
  }
  //.. another stuff

}

Also i leave a link for you, with tutorial how to use ise.

I hope it will help you.

Thanks

这篇关于如何让 ReactJs 与 Webpack 集成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！