Question

我正在尝试使用Webpack进行基本的React设置，但是目前在我试图渲染的html上出现此控制台错误。

不确定为什么，任何想法？

模块构建失败：SyntaxError：

的Javascript

private static void TestReader()
    {
        var text = File.ReadAllText(@"D:\sample.txt");
        var fileLines = new List<SampleData>();
        foreach (var fileLine in text.Split(new string[] { Environment.NewLine }, StringSplitOptions.RemoveEmptyEntries))
        {
            var lineData = fileLine.Split(',');

            // Make sure all the keys are present / do a separate check
            if (lineData.Length <= 2)
            {
                continue;
            }

            fileLines.Add(new SampleData
            {
                Code = Convert.ToString(lineData[0]),
                Description = Convert.ToString(lineData[1]),
                SelectedDate = lineData.Length >= 3 ? DateTime.ParseExact(lineData[2], "dd.MM.yyyy", null) : DateTime.MinValue
            });
        }
    }

    public class SampleData
    {
        public string Code { get; set; }
        public string Description { get; set; }
        public DateTime SelectedDate { get; set; }
    }

Webpack配置

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
    render() {
        return (
            <p>h</p>
        )
    }
}

render(<App/>, document.getElementById('main'));

的package.json

const webpack = require('webpack');
const nodeEnv = process.env.NODE_ENV || "production";

module.exports = {
    devtool: "source-map",
    entry: {
        filename: "./index.js"
    },
    output: {
        filename: "build/bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015-native-modules']
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            output: { comments: false },
            sourcemap: true
        }),
        new webpack.DefinePlugin({
            'process.env': { NODE_ENV: JSON.stringify(nodeEnv
            )}
        })
    ]
}

Answer 1

你需要babel做出反应预设，我看到你现在使用奇怪的预设，改用es2015

反应 - 模块构建失败

1 个答案: