javascript - nodejs reactjs 和 webpack，配置错误但是什么？

Question

我知道那里有很多描述设置的资源，我已经尝试了几种方法，但事情变化太快以至于我谷歌的例子已经过时了——这里是

package.json
{
  "name": "scoreboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.15",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "webpack": "^1.12.9"
  }
}

这是我的 webpack.config.js

module.exports = {
    context: __dirname + "/app",
    entry: "./main.js",
    output: {
        filename: "main.js",
        path: __dirname + "/dist"
    },
    module: {
        loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ["babel-loader"],
            query: {
                presets: ["react", "es2015"]
            }
        }
        ]
    }
}

目录结构

app
- greeting.js
- main.js
dist
node_module
package.json
webpack.config.js

greeting.js 的内容

import React from "react";

export default React.createClass({
    render: function () {
        return (
            <div className="greeting">
                Hello {this.props.name}!
            </div>
        );
    },
});

main.js 的内容

import React from "react";
import Greeting from "./greeting";

React.render(
        <Greeting/>,
        document.body
);

但是当我运行的时候

$ webpack Hash: 553345561044745134b3 Version: webpack 1.12.9 Time: 2573ms
    + 1 hidden modules

ERROR in ./main.js Module build failed: SyntaxError: /Users/kristiannissen/Documents/js/scoreboard/app/main.js: Unexpected token (5:8)   3     4 React.render(
> 5        <Greeting/>,
           ^   6         document.body   7 );   8

据我所知 <Greeting/>没有按预期呈现。为了安装它，我运行了 npm install --save react react-dom babelify babel-preset-react --save-dev

更新将查询添加到 webpack.config.js 但在运行 webpack 时我现在得到这个

$ webpack
.../scoreboard/node_modules/webpack-core/lib/LoadersList.js:54
        if(!element.loader || element.loader.indexOf("!") >= 0) throw new Error("Cannot define 'query' and multiple loaders in loaders list");

仍然没有放弃我希望的方式

更新将 webpack.config.js 更改为

后

module.exports = {
    context: __dirname + "/app",
    entry: "./main.js",
    output: {
        filename: "main.js",
        path: __dirname + "/dist"
    },
    module: {
        loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                presets: ["react", "es2015"]
            }
        }
        ]
    }
}

并安装提到的模块，这太棒了!我的问候语文件中有错字，返回函数不应该使用 {} 而是 ()

完整的 package.json

{
  "name": "scoreboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.15",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "webpack": "^1.12.9"
  }
}

Answer 1

您需要将您安装的 babel-preset-react 添加到 webpack 配置中。您可能还需要将“loaders”属性更改为“loader”并将“es2015”预设添加到查询数组，因为您也安装了它。

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