xml 没有被转换

Question

我是 node.js 和 reactjs 的新手。我有下面的 index.js 文件作为我需要转译的小应用程序的入口点。

我正在使用 webpack，并且我有以下 package.json。

src/index.js

import React from 'react'
import { render } from 'react-dom'
import { hello, goodbye } from './lib'

render(
     <div>
        {hello} 
        {goodbye}
     </div>
    ,
    document.getElementById('react-container')
)

package.json

var webpack = require("webpack");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: "dist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: './dist',
        port: 3000
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: "babel-loader",
                query: {
                    presets: ["latest", "stage-0", "react"]
                }
            },
            {
                test: /\.json$/,
                exclude: /(node_modules)/,
                loader: "json-loader"
            }
        ]
    }
}

如果我尝试构建，我会收到以下错误：

ERROR in ./src/index.js
Module parse failed: /home/mike/Desktop/Exercise_Files/Ch02/02_06/start/src/index.js Unexpected token (6:2)

文件夹结构如下：

.
├── dist
│   ├── bundle.js
│   ├── bundle.js.map
│   ├── index.html
│   └── main.js
├── node_module(+)
├── out.txt
├── package.json
├── src
│   ├── index.bbl.js
│   └── index.js
└── webpack.config.js

编辑

我知道错误是说它无法编译

工作 webpack.config.js

var webpack = require("webpack");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: "dist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: './dist',
        port: 3000
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: ["babel-loader"],
                query: {
                    presets: ["latest", "stage-0", "react"]
                }
            },
            {
                test: /\.json$/,
                exclude: /(node_modules)/,
                loader: "json-loader"
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!autoprefixer-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'
            }
        ]
    }
}

编辑

Here 是上述问题的代码。

如果您对此有任何线索，请告诉我。

谢谢

Answer 1

尝试像这样修改 babel 的配置查询：

...
query: {
    presets: ["latest", "stage-0", "react"],
    plugins: ["transform-react-jsx"]
}
...

我可以和你分享我自己的配置，但这很奇怪：D

显然，您应该首先通过npm 安装它。 更多信息您可以获取here :)