Question

嗨，我刚刚开始学习reactjs。我有一些问题，我不知道如何解决它。

这是我的package.json文件

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "5.8.*",
    "babel-loader": "5.3.*",
    "react": "0.13.*",
    "webpack": "1.12.*",
    "webpack-dev-server": "1.10.*"
  }
}

webpack.config，js file

module.exports = {
    entry: [
        './src/App.js'
    ],
    output: {
        path: __dirname,
        filename: 'app.js'
    },
    module: {
        loader: [{
            test: /\.jsx?$/,
            loader: 'babel'
        }]
    }
};

和app.js文件

import React from 'react';

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>alo</h1>
            </div>
        )
    }
}

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

以及运行webpack时的错误

ERROR in ./src/App.js
Module parse failed: C:\Users\mkrtc\Desktop\react\src\App.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
|
| class App extends React.Component {
 @ multi main

Answer 1

您需要设置babel配置。与babel 5不同，Babel 6并没有开箱即用。插件和预设需要设置。在根级别创建.bablerc文件，如下所示：

"presets": [
  "react",
  "stage-0"
],

这样可以预设react和stage-0

中的要素

React和webpack适当的加载程序错误

1 个答案: