您可能需要一个合适的加载器来处理这种文件类型 js

Question

我正在使用 MVC 应用程序并尝试通过 Webpack 添加 Bootsrap5，但出现以下错误。我已经尝试了 stage-0、stage-2 和 stage-3 的许多解决方法，但对我没有任何效果。

我怀疑问题是由于三个点（扩展语法）引起的，但解决方法对我没有帮助。

问题：

ERROR in ./~/bootstrap/dist/js/bootstrap.esm.js
Module parse failed: C:\DO NOT DELETE\Projects\GIT_SourceCode\Brain.Web\node_modules\bootstrap\dist\js\bootstrap.esm.js 
Unexpected token (1242:15)
You may need an appropriate loader to handle this file type.
|
|   _getConfig(config) {
|     config = { ...Default$a,
|       ...Manipulator.getDataAttributes(this._element),
|       ...(typeof config === 'object' ? config : {})
 @ ./Content/js/site.js 5:0-19

ERROR in site-30927619780d53073ccb.min.js from UglifyJs
Unexpected token: name (BSTChart) [site-30927619780d53073ccb.min.js:107816,6]

ERROR in report-30927619780d53073ccb.min.js from UglifyJs
Unexpected token: name (BSTChart) [report-30927619780d53073ccb.min.js:106016,6]

Package.json

{
  "dependencies": {
    "inputmask": "^3.3.10"
  },
  "devDependencies": {
    "@amcharts/amcharts4": "4.10.17",
    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
    "@popperjs/core": "2.10.2",
    "acorn": "^6.1.1",
    "amcharts3": "3.21.15",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-stage-0": "^6.24.1",
    "bootstrap": "5.1.3",
    "bootstrap-datepicker": "^1.6.4",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-toggle": "^2.2.2",
    "css-loader": "^0.27.3",
    "dropzone": "5.5.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "font-awesome": "^4.7.0",
    "html5sortable": "^0.6.1",
    "inputmask": "^3.3.10",
    "jquery": "^3.2.1",
    "jquery-ajax-unobtrusive": "^3.2.4",
    "jquery-confirm": "3.3.4",
    "jquery-ui": "^1.12.1",
    "jquery-validation": "^1.16.0",
    "jquery-validation-unobtrusive": "^3.2.6",
    "node-sass": "^4.5.1",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "sass-loader": "^6.0.3",
    "select2": "^4.0.3",
    "select2-bootstrap-theme": "^0.1.0-beta.10",
    "style-loader": "^0.16.0",
    "toastr": "^2.1.2",
    "webpack": "^2.3.1",
    "webpack-cleanup-plugin": "^0.5.1"
  },
  "license": "MIT",
  "main": "index.js",
  "name": "brain",
  "scripts": {
    "build": "webpack",
    "build-prod": "webpack --config ./webpack.prod.config.js"
  },
  "version": "1.0.0"
}

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
const webpack = require('webpack');

module.exports = {
    watch: true,
    entry: {
        site: path.resolve(__dirname, 'Content/js/site.js'),
        report: path.resolve(__dirname, 'Content/js/report.js')
    },
    output: {
        path: path.resolve(__dirname, 'Content/build/'),
        filename: '[name]-[hash].min.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    plugins: ['transform-object-rest-spread']
                },
                exclude: [path.resolve(__dirname, 'node_modules')]
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                }),
                exclude: [path.resolve(__dirname, 'node_modules')]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: {
                    loader: 'file-loader',
                    options: { name: 'img/[name].[ext]' }
                }
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: {
                    loader: 'file-loader',
                    options: { name: 'fonts/[name].[ext]' }
                }
            }
        ]
    },
    resolve: {
        alias: {
            jquery: 'jquery/src/jquery',
            'jquery-ui': 'jquery-ui/ui'
        }
    },
    plugins: [
        new WebpackCleanupPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            jquery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        new ExtractTextPlugin({
            filename: '[name]-[hash].min.css',
            allChunks: true
        })
    ]
};

Answer 1

对我有用的解决方案是升级 Webpack 并包括 plugin-proposal-object-rest-spread 的插件。

我们在升级Webpack的时候，也需要升级一些插件。

Package.json

{
  "dependencies": {
    "@babel/runtime": "7.5.2",
    "inputmask": "^3.3.10",
    "uglifyjs-webpack-plugin": "^2.2.0"
  },
  "devDependencies": {
    "@amcharts/amcharts4": "4.10.17",
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@popperjs/core": "^2.10.2",
    "acorn": "^6.1.1",
    "amcharts3": "3.21.15",
    "babel-loader": "^8.2.2",
    "bootstrap": "^5.1.3",
    "bootstrap-datepicker": "^1.6.4",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-toggle": "^2.2.2",
    "css-loader": "^0.27.3",
    "dropzone": "5.5.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.2.0",
    "font-awesome": "^4.7.0",
    "html5sortable": "^0.6.1",
    "inputmask": "^3.3.10",
    "jquery": "^3.2.1",
    "jquery-ajax-unobtrusive": "^3.2.4",
    "jquery-confirm": "3.3.4",
    "jquery-ui": "^1.12.1",
    "jquery-validation": "^1.16.0",
    "jquery-validation-unobtrusive": "^3.2.6",
    "node-sass": "^4.5.1",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "sass-loader": "^7.3.1",
    "select2": "^4.0.3",
    "select2-bootstrap-theme": "^0.1.0-beta.10",
    "style-loader": "^3.3.0",
    "toastr": "^2.1.2",
    "webpack": "4.35.3",
    "webpack-cleanup-plugin": "^0.5.1",
    "webpack-cli": "^3.3.5"
  },
  "license": "MIT",
  "main": "index.js",
  "name": "brain",
  "scripts": {
    "build": "webpack",
    "build-prod": "webpack --config ./webpack.prod.config.js"
  },
  "version": "1.0.0"
}

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    watch: true,
    entry: {
        site: path.resolve(__dirname, 'Content/js/site.js'),
        report: path.resolve(__dirname, 'Content/js/report.js')
    },
    output: {
        path: path.resolve(__dirname, 'Content/build/'),
        filename: '[name]-[hash].min.js'
    },
    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [["@babel/preset-env", { "targets": "defaults" }]],
                        plugins: ["@babel/plugin-proposal-object-rest-spread"],
                        cacheDirectory: true
                    }
                },
                exclude: [path.resolve(__dirname, 'node_modules')]
            },           
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                }),
                exclude: [path.resolve(__dirname, 'node_modules')]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: {
                    loader: 'file-loader',
                    options: { name: 'img/[name].[ext]' }
                }
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: {
                    loader: 'file-loader',
                    options: { name: 'fonts/[name].[ext]' }
                }
            }
        ]
    },
    resolve: {
        alias: {
            jquery: 'jquery/src/jquery',
            'jquery-ui': 'jquery-ui/ui'
        }
    },
    plugins: [
        new WebpackCleanupPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            jquery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        new ExtractTextPlugin({
            filename: '[name]-[hash].min.css',
            allChunks: true
        })
    ],
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i,
            }),
        ],
    }
};

您可能需要一个合适的加载器来处理这种文件类型 js

You may need an appropriate loader to handle this file type js

javascript

spread

webpack

babel-loader

bootstrap-5