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

修改

我理解错误是说它无法编译＆lt; jsx语法。但是，实际上这段代码是在线课程的一部分，它有webpack.config.js文件，它可以转换jsx，但我不确定以下工作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：）

xml未转换

1 个答案: