在生产模式下编译时出错“不是函数”Vue Laravel Mix

Question

我有一个 Laravel、VueJs、VueRouter、Vuex 应用程序，使用 Webpack 来编译我的资产。

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.14.0",
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "laravel-mix": "^3.0.0",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "@fullcalendar/core": "^5.11.3",
        "@fullcalendar/daygrid": "^5.11.3",
        "@fullcalendar/interaction": "^5.11.3",
        "@fullcalendar/list": "^5.11.3",
        "@fullcalendar/timegrid": "^5.11.3",
        "@fullcalendar/vue": "^5.11.3",
        "ajv": "^6.12.3",
        "animate.css": "^3.7.2",
        "aos": "^2.3.4",
        "apexcharts": "^3.33.0",
        "chart.js": "^2.7.3",
        "element-ui": "^2.4.8",
        "imagemin": "^6.0.0",
        "jquery": "^3.4.1",
        "moment": "^2.27.0",
        "node-sass": "^4.14.1",
        "numeral": "^2.0.6",
        "simple-keyboard": "^2.29.72",
        "toastr": "^2.1.4",
        "vue-apexcharts": "^1.6.2",
        "vue-chartjs": "^3.4.0",
        "vue-data-tables": "^3.4.5",
        "vue-router": "^3.5.2",
        "vue-touch-keyboard": "^0.3.2",
        "vuedraggable": "^2.24.3",
        "vuex": "^3.5.1",
        "xml-js": "^1.6.11"
    }
}

当我在生产模式下构建 npm run prod 时，我收到错误

s is not a function

但是如果我在像 npm run watch 或 npm run dev 这样的开发中构建，我不会收到错误。

如何调试代码中的错误位置以便修复它？它只在 vue.common.prod 行中显示我。

vue.common.prod.js:11 TypeError: s 不是函数 在 e (vue.common.prod.js:11:68600)

我的文件 webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/front/app.js', 'public/js')
    .extract(['vue','vuex', 'jquery', 'bootstrap', 'axios', 'element-ui', 'lodash', 'moment', 'popper.js'])
    .version();


mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.json', '.vue'],
        alias: {
            '@': path.join(__dirname, './resources/js'),
            '~': path.join(__dirname, './resources/js/front'),
            '@@': path.join(__dirname, './modules'),
            '@components': path.join(__dirname, './resources/js/components')

        }
    },
    output: {
         filename:'[name].js',
         chunkFilename: 'js/[name].js',
    },
}).sourceMaps()    

Answer 1

我最终通过安装 terser-webpack 插件版本 4 解决了这个完全相同的问题。

npm install terser-webpack-plugin --save-dev

根据您的 webpack 版本，您可能需要安装不同的版本。

Webpack v5 附带最新的 terser-webpack-plugin 开箱即用。如果您使用 Webpack v5 或更高版本并希望自定义选项，您仍然需要安装 terser-webpack-plugin。使用 Webpack v4，您必须安装 terser-webpack-plugin v4。

来源： https://github.com/webpack-contrib/terser-webpack-plugin#getting-started

Answer 2

• 选项 01) : 检查你写的函数

在定义函数之前尝试调用函数时，这是一个标准 JavaScript 错误。如果您尝试执行未初始化或未正确初始化的函数，则会出现此错误。这意味着表达式没有返回 s 函数对象。所以你需要明白你想要实现的并不是它的功能。

• 选项 02) : 删除node_module并清除缓存npm缓存清除

  --force

  。 之后使用 npm install 重新安装 node_module。

• 选项 03) : 检查你导入的东西忘记了导入语句中的大括号。