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

Question

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

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 但是当运行ning 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"]
            }
        }
        ]
    }
}

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

完整 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']
       }
    }
]

Answer 2

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

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

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

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

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

nodejs reactjs and webpack, config is wrong but what?

javascript

node.js

reactjs

webpack