XML не преобразуется - PullRequest
0 голосов
/ 02 июня 2018

Я новичок в node.js и реагировать.У меня есть файл index.js, указанный ниже, в качестве точки входа в мое небольшое приложение, которое мне нужно перенести.

Я использую веб-пакет, и у меня есть следующий пакет 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')
)

.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'
            }
        ]
    }
}

РЕДАКТИРОВАТЬ

Здесь - кодс проблемой, описанной выше.

Пожалуйста, дайте мне знать, если у вас есть какие-либо подсказки по этому поводу.

Спасибо

1 Ответ

0 голосов
/ 02 июня 2018

Попробуйте изменить запрос конфигурации вашего babel следующим образом:

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

Я могу поделиться своими собственными настройками, но это довольно странно: D

Очевидно, что сначала вам нужно установить его черезnpm.Больше информации вы можете получить здесь :)

...