nodejs reactjs和webpack，配置错误但是什么？答案

【问题标题】：nodejs reactjs and webpack, config is wrong but what?nodejs reactjs和webpack，配置错误但是什么？
【发布时间】：2015-12-10 20:57:14
【问题描述】：

我知道有很多资源描述了设置，并且我尝试了几种方法，但似乎事情变化如此之快，以至于我在谷歌上搜索的示例已经过时 - 在这里

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"]
            }
        }
        ]
    }
}

并安装提到的模块，它的 twerking！我的问候文件中有错字，返回函数不应使用 {} 而是 ()

完整的 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"
  }
}

【问题讨论】：

您是否尝试过使用 wepack 的 loader 属性而不是 loaders？

标签： javascript node.js reactjs webpack

【解决方案1】：

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

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

【讨论】：

@kristiannissen 我根据您的尝试结果更新了我的答案。

【解决方案2】：

您遇到的第一个问题是由于 Babel 无法解析和转换 JSX 语法。

安装babel-preset-react 解决了这个问题，你通过查询对象有效。

但是，当使用query : { } 时，您必须定义一个加载器（单数）而不是加载器数组（复数）。这是最后一条错误消息告诉您的内容。

用loader: "babel-loader" 替换loaders: ["babel-loader"] 应该可以解决您的问题。

【讨论】：