javascript - 无法设置 webpack+react+jquery+bootstrap 项目

Question

我的项目已正确编译。但每当我加载网页时，我都会在控制台中收到此错误:

    bundle.4bc8d06487c51394a532.js:71 Uncaught Error: Module build failed: SyntaxError: Unexpected token (31:4)

[0m [90m 29 | [39m
 [90m 30 | [39m[33mReactDOM[39m[33m.[39mrender(
[31m[1m>[22m[39m[90m 31 | [39m    [33m<[39m[33mProvider[39m store[33m=[39m{createStoreWithMiddleware(reducers)}[33m>[39m
 [90m    | [39m    [31m[1m^[22m[39m
 [90m 32 | [39m        [33m<[39m[33mApp[39m [33m/[39m[33m>[39m
 [90m 33 | [39m    [33m<[39m[33m/[39m[33mProvider[39m[33m>[39m
 [90m 34 | [39m    [33m,[39m document[33m.[39mquerySelector([32m'.container'[39m))[33m;[39m[0m


    at Object.106 (bundle.4bc8d06487c51394a532.js:71)
    at __webpack_require__ (bundle.4bc8d06487c51394a532.js:20)
    at 106 (bundle.4bc8d06487c51394a532.js:63)
    at bundle.4bc8d06487c51394a532.js:66

这是我的主要文件:

webpack.config.js

const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')

const extractSass = new ExtractTextPlugin({
    filename: "styles.css",
});

const VENDOR_LIBS = [
    'react', 'lodash', 'redux', 'react-redux', 'react-dom', 'react-input-range', 'redux-form', 'redux-thunk'
];


module.exports = {
    entry: {
        bundle: './src/index.js',
        vendor: VENDOR_LIBS
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
            },
            {
                test: /\.(scss)$/,
                use: extractSass.extract({
                    fallback: 'style-loader',
                    //resolve-url-loader may be chained before sass-loader if necessary
                    use: [{
                        loader: "css-loader" // translates CSS into CommonJS
                    }, {
                        loader: "sass-loader" // compiles Sass to CSS
                    }]
                })
            },

            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
                loader: 'file-loader'
            }

        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery", // Used for Bootstrap JavaScript components
            jQuery: "jquery", // Used for Bootstrap JavaScript components
            Tether: 'tether',

            Popper: ['popper.js', 'default'] // Used for Bootstrap dropdown, popup and tooltip JavaScript components
        }),
        extractSass
    ] };

.babelrc

{
  "presets": ["babel-preset-env", "react"]
}

package.json

{
  "name": "app-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "clean": "rimraf dist",
    "build": "webpack",
    "serve": "webpack-dev-server"
  },
  "repository": "",
  "author": "Edgar KAMDEM",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.6",
    "file-loader": "^1.1.5",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "jquery-ui-dist": "^1.12.1",
    "lodash": "^4.17.4",
    "mxgraph": "^3.8.0",
    "popper.js": "^1.12.9",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-input-range": "^1.2.2",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "redux": "^3.7.2",
    "redux-form": "^7.2.0",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.0.9",
    "precss": "^2.0.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.7"
  }
}

index.js

// Bootstrap dependencies
window.$ = window.jQuery = require('jquery') // required for bootstrap
window.Popper = require('popper.js') // required for tooltip, popup...
import 'bootstrap'
// import '../scss/main.scss' import it in prod


import './index.scss' // include bootstrap css file with own modifications

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';



// tooltip and popover require javascript side modification to enable them (new in Bootstrap 4)
// use tooltip and popover components everywhere
$(function (){
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="popover"]').popover();
});


const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
        <App />
    </Provider>
    , document.querySelector('.container'));

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app test</title>
    <link rel="stylesheet" type="text/css" href="build/styles.css">
    <link rel="stylesheet" href="external/jqueryui-ruler/css/jquery.ui.ruler.css">
</head>
<body >
<header >

</header>

<!-- Begin page content -->
<div role="main" class="container">

</div>


<footer>

</footer>


<script src="build/bundle.4bc8d06487c51394a532.js"></script>
<script src="build/vendor.b97aa871a1eeaedf871a.js"></script>

</body>
</html>

app.js

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return (
            <div style="font-size: 40px">React simple starter</div>
        );
    }
}

它应该在 html 页面上显示“React simple starter”，但事实并非如此。

如果您想查看其他文件，请帮忙告诉我

PS:我对 webpack 很陌生

Answer 1

尝试将 babel-preset-env 和 babel-preset-react 添加到您的 devDependency 并删除 babel-preset-es2015:

yarn add -d babel-preset-env babel-preset-react 或 npm install -D babel-preset-env babel-preset-react

并更改你的 .babelrc :

{
    "presets": [
       ["react"],
       ["env"]
    ],
}

编辑:

尝试像这样创建你的 redux 存储:

const store = createStore(reducers) //assuming reducers is your combined reducers
...
<Provider store={store}>

而不是:

const createStoreWithMiddleware = applyMiddleware()(createStore);
...
<Provider store={createStoreWithMiddleware(reducers)}>