UglifyJsPlugin:Uncaught(inpromise)TypeError:Assignmenttoconstantvariable

語境

使用 webpack 構建 Webapp（使用的框架是 vuejs，快速瀏覽，這里不相關）

當 webapp 處于開發模式時，不會拋出任何錯誤。當 webapp 處于生產模式（構建）時，會引發錯誤：Uncaught (in promise) TypeError: Assignment to constant variable

在商店的 action.js 檔案中

import Axios from 'axios';

let isError404 = function(error){
    return (
        error.status === 404 ||
        error.toString().includes('Request failed with status code 404')
    );
};

export default{
    async remoteGet (context, {url, config={}){
        return this.axios.get(url, config).catch(async (err) => {
            const error = err.response;
            if (isError404(error)) {
                return 'error'
            }
        } 
    } 
}

快速分析

當使用 axios 在 get 中呼叫以下函式時，似乎會發生錯誤。

let isError404 = function(error){
        error.status === 404 ||
        error.toString().includes('Request failed with status code 404')
}

將此代碼替換為時不再發生錯誤

const isError404 = (error) => {
        error.status === 404 ||
        error.toString().includes('Request failed with status code 404')
}

您知道為什么首先會發生錯誤嗎？

編輯：何時isError404(error)宣告如下：let isError404 = function(error){ ...

如果我console.log(isError404(error))在if.

在網上搜索后似乎錯誤可能是由包引起的，"uglifyjs-webpack-plugin": "^1.1.1",但我不知道如何測驗和確定。

編輯 2：Webpack 3.12.0

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const outputFile = 'fundation-app-vuejs'
const globalName = 'fundation'

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRoot,
    filename: outputFile   '.browser.js',
    library: globalName,
    libraryTarget: 'umd',
  },
  externals: [
    'axios',
    'element-ui',
    'email-validator',
    'generate-password',
    'moment',
    'schwartz',
    'v-lazy-image',
    'v-runtime-template',
    'vue',
    'vue-markdown',
    'vue-moment',
    'vue-resource',
    'vue-router',
    'vuex',
    'vuex-persistedstate',
    /^element-ui\/lib\/.*/
  ],
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),
  ]
})

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.('  
        config.build.productionGzipExtensions.join('|')  
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

uj5u.com熱心網友回復：

我找到了錯誤的根源：https ://github.com/mishoo/UglifyJS/issues/2843

解釋 ：

如果我理解問題 UglifyJsPlugin (1.1.1) 使用 UglifyJS 的一個版本，它在重新分配一個常量時會產生錯誤。

這是在inline選項時引起的true（默認情況下，此版本中的）。

在包更新之前，最簡單的解決方法是在 webpack 配置中將 uglifyJsPlugin 的行內選項設定為 false：

    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          inline: false,
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

標籤：javascript 网页包 Vuejs2 承诺 丑陋的

上一篇：TypeScript升級后Storybook中斷（v3到v4）

下一篇：如何為單個反應應用程式創建多個入口點（index.js）？