Question

开始学习反应试图遵循一些互联网上的指示，完成基本设置，但出现以下错误：

>  ERROR in ./src/index.js 7:11
>     Module parse failed: Unexpected token (7:11)

You may need an appropriate loader to handle this file type.
|     render(){
|        return (
>            <div>
|                <h1>Hello!</h1>
|            </div>

Answer 1

在“开始学习反应”时，配置webpack和babel并不是较简单的步骤之一，因此，我建议使用create-react-app。

https://facebook.github.io/create-react-app/docs/getting-started

Answer 2

您的webpack配置应使用加载程序加载文件。使用webpack 4和babel 7的示例webpack配置：

const path = require('path');
const webpack = require('webpack');
const urlLoader = require('url-loader');

// copy manifest.json to the path: 'public/build'
// this will allow for the authRequest to see the file at www.example.com/manifest.json
const CopyWebpackPlugin = require('copy-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    target: 'web',
    output: {
        path: path.resolve('dist'),
        filename: 'index_bundle.js',
    },
    devtool: "source-map",
    devServer: {
        historyApiFallback: true,
        watchOptions: {aggregateTimeout: 300, poll: 1000},
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
            "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
        },
    },
    module: {
        rules: [
            {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {
                test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
                loader: 'file-loader',
            },
            {test: /\.css$/, loader: 'style-loader!css-loader'}
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
};

请注意，它是配置文件中的babel-loader而不是babel linke。 现在我的依赖项：

"@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-proposal-function-bind": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
    "@babel/plugin-transform-shorthand-properties": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "bootstrap": "^3.3.7",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "deep-freeze": "^0.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "json-loader": "^0.5.7",
    "path": "^0.12.7",
    "style-loader": "^0.16.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.0",
    "webpack-dev-server": "^3.1.14"

当然，您可能不需要其中的一些。还可以考虑使用webpack-encore-它是webpack的简化版本，最初是为了更轻松地与symfony后端协作而设计的，但对于其他后端来说完全没问题。参见例如。 webpack（-encore）配置：

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public')
    .setPublicPath('/')

    // read main.js     -> output as web/build/app.js
    .addEntry('js/main', './public/src/main.js')
    // read global.scss -> output as web/build/global.css
    .addStyleEntry('css/styles', './public/scss/global.scss')
    .disableSingleRuntimeChunk()
    // enable features!
    .enableSassLoader()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction());

module.exports = Encore.getWebpackConfig();

反应：模块解析失败：意外的令牌

2 个答案: