web-dev-qa-db-fra.com

Webpack optimise avec le plugin UglifyJS provoque une erreur d'exécution

J'ai une application isomorphe React qui est fournie via le webpack.

J'ai 2 points d'entrée correspondant à 2 sorties de fichiers groupées: vendors.js et app.js.

Lors de l'exécution de webpack-dev-server ou lors de la compilation sans indicateur d'optimisation, tout fonctionne correctement. Cependant, dès que j'essaie d'utiliser le plugin glify, la sortie compilée contient des erreurs.

J'ai essayé:

webpack -p
webpack -optimize-minimize

ou dans la config:

new webpack.optimize.UglifyJsPlugin({sourceMap:false})

Mais tous entraînent la même erreur d'exécution (variables non définies).

Y a-t-il quelque chose d'évident qui pourrait être à l'origine de cela? Uglify est-il trop zélé et supprime-t-il quelque chose qu'il ne devrait pas?

javascriptreactjsuglifyjswebpack
37
duncanhall

Le problème était causé par le déménageur Uglify. Sans savoir quelle variable renommer était à l'origine du problème, la solution consistait à désactiver complètement la modification:

new webpack.optimize.UglifyJsPlugin({
  sourceMap: false,
  mangle: false
})

Cela devrait être ajouté en tant que Webpack Plugin à votre fichier de configuration, par exemple:

var config = {

  //... various config settings

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      mangle: false
    })
  ]
};
68
duncanhall

Pour ceux qui ont désactivé mangle et qui ont toujours le problème, vérifiez si vous construisez avec le paramètre -p. Il semble que -p modifie également la sortie, et dans mon cas, j'ai dû basculer le mangle UflifyJsPlugin sur false et construire sans l'indicateur -p pour le faire fonctionner (au prix d'une augmentation du poids du js d'environ 50). %)

1
mbegoc

J'ai résolu ce problème en utilisant ce qui suit (j'utilise Webpack 4.5):

var config = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          safari10: true,
          mangle: {
            safari10: true,
          }
        }
      })
    ]
  }
};

De https://github.com/mishoo/UglifyJS2/tree/harmony#mangle-options :

safari10 (false par défaut) - Passez true pour contourner le bogue de l'itérateur de boucle Safari 10 "Impossible de déclarer deux fois une variable let". Voir aussi: l'option de sortie safari10.

Notez également que cela va dans optimization.minimizer. Cela n'a pas fonctionné pour moi quand je l'ai mis dans plugins.

0
TurplePurtle