Webpack không hoạt động khi React được giới thiệu

Tôi đã làm theo hướng dẫn chính về webpack và tôi đã thiết lập và chạy máy chủ. Khi tôi thay đổi tệp, nó sẽ cập nhật khi lưu, tất cả đều tốt. Tuy nhiên, sau đó tôi đã giới thiệu React và tất cả đều sai.Webpack không hoạt động khi React được giới thiệu

Thứ nhất, tôi nhận được lỗi này trong trình duyệt:

Unexpected token < 
You may need an appropriate loader to handle this file type.

này được trỏ đến dòng 4 trong tập tin entry.js tôi:

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

Đây là index.html

<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 

    <div id ="content"></div> 
<script type="text/javascript" src="bundle.js" charset="utf-8"></script> 
</body> 
</html>

webpack.config.js:

module.exports = { 
    entry: "./entry.js", 
    output: { 
    path: __dirname, 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'jsx-loader?insertPragma=React.DOM&harmony' 
     } 
    ] 
    }, 
    externals: { 
    'react': 'React' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    } 
};

Nếu tôi thay đổi các tập tin entry.js chỉ chứa:

document.write(require("./content.js"));

Nó tạo ra những gì tôi hiện có trong file content.js:

module.exports = "this is working";

Vì vậy, do đó nó là một cái gì đó để làm với phản ứng/jsx vv Bất cứ ai có bất kỳ giải pháp này? Tôi đã thấy những người khác trực tuyến với vấn đề này nhưng các giải pháp được đưa ra đã không làm việc cho tôi cho đến nay.

Nguồn

2015-11-23 The Hurricane

Bạn đang sử dụng phiên bản phản ứng và babel nào? Cả hai đều có những thay đổi phá vỡ hầu hết các hướng dẫn cũ. Vui lòng liên kết đến hướng dẫn. – Yannick

Có thể bạn muốn tải trình tải xuống thay vì trình tải jsx https://github.com/babel/babel-loader – wgcrouch

Webpack và jsx-loader

webpack.config.js

module.exports = { 
    entry: './app.js', 
    output: { 
    path: __dirname, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js/, 
     loader: 'jsx-loader' 
    }] 
    } 
}

app.js

var React = require('react'); 

var App = React.createClass({ 
    render: function() { 
    return <h1>Hello World</h1> 
    } 
}) 

React.render(<App/>, document.getElementById('app'))

và đơn giản index.html tập tin với một <div>

Có thể bạn muốn sử dụng Phản ứng với một cú pháp ES6 (Phản ứng webpack và babel) vậy: tôi hy vọng my post sẽ hữu ích cho bạn.

Cập nhật:

Như FakeRainBrigand nói jsx-loader được depricated, nó sẽ là tốt nếu bạn sẽ cố gắng sử dụng một babel-loader thay vì jsx-loader

Cảm ơn

Nguồn

2015-11-23 13:00:29

bộ tải jsx không được chấp nhận – FakeRainBrigand

@FakeRainBrigand Tôi chưa từng nghe về nó, có thể vì tôi chưa sử dụng nó . Tôi chỉ cố trả lời một câu hỏi. Dù sao cũng cảm ơn. tôi sẽ cập nhật câu trả lời của mình –

Giống như FakeRainBrigand cho biết jsx-loader không được dùng nữa, nếu bạn muốn chuyển đổi es6 hoặc jsx, có thể bạn sẽ muốn sử dụng babel-loader.Và kể từ khi Babel 6 được phát hành bây giờ bạn sẽ phải explicitely tuyên bố mà chuyển đổi để thực hiện bằng cách thiết lập "cài đặt trước" trong một file .babelrc như thế này:

$ npm install --save-dev babel-loader

$ npm install --save-dev babel-preset-es2015

$ npm install --save-dev babel-preset-react

{ 
    "presets": ["es2015","react"] 
}

webpack.config.js

module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style!css" }, 
     { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['es2015'] 
      } 
     }, 
     { 
      test: /\.jsx$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['react'] 
      } 
     },    
    ] 
},

Nguồn

2015-11-24 12:36:06

Webpack không hoạt động khi React được giới thiệu

Trả lời

Các vấn đề liên quan