角度4.0でregexを使って変数をマングルするためのUglifyJsPluginの設定方法

Question

Angualr 4の出力ファイルを作成し、my_で始まる特定の変数をmangleしたい。以下のコマンドラインは、私が望む正確なことを行います。私はちょうど同じことをするangi-cliのwebpackのプラグインをuglifyJsに伝えることができるようにしたい。

> uglifyjs script.js --source-map "filename='script.js.map',includeSources,content=inline" -o script.js -m 
-c toplevel --mangle-props \"regex=/^my_[^_]{1}/\" --name-cache uglify-name-cache.json 

私はejectコマンドでangular-cliからwebpack.config.jsをエクスポートしています。しかし、自動生成されたファイルのuglifyJspluginにregexとname-cacheの各パラメータを伝える方法に関するドキュメントは見つかりません。どちらもアプリケーションにとって非常に重要です。ここで

From webpack.config.js produced by eject command: 

new UglifyJsPlugin({ 
    "test": /\.js$/i, 
    "extractComments": false, 
    "sourceMap": true, 
    "cache": false, 
    "parallel": false, 
    "uglifyOptions": { 
    "output": { 
     "ascii_only": true, 
     "comments": false 
    }, 
    "ecma": 5, 
    "warnings": false, 
    "ie8": false, 
    "mangle": true, 
    "compress": {} 
    } 
}), 

は、自動生成されたweppack.configをキャプチャし、それを修正するためにangualrイジェクトを使用する方法についてのブログ記事です。 https://www.codesd.com/item/angular-cli-how-to-ignore-class-names-from-being-minified.htmlしかし、ugllifyプラグインの正規表現を指定する方法が見つかりません

ありがとうございます。

Some other helpful info: 

"dependencies": { 
    "@angular/common": "4.4.6", 
    "@angular/compiler": "4.4.6", 
    "@angular/core": "4.4.6", 
    "@angular/http": "4.4.6", 
    "@angular/platform-browser": "4.4.6", 
    "@angular/platform-browser-dynamic": "4.4.6", 
    "@angular/router": "4.4.6", }, 
"devDependencies": { 
    "@angular/cli": "1.5.0", 
    "@angular/compiler-cli": "4.4.6", 
    "@types/node": "7.0.43", 
    "clean-webpack-plugin": "0.1.17", 
    "codelyzer": "3.2.2", 
    "copy-webpack-plugin": "4.2.0", 
    "uglify-js": "3.1.8", 
    "webpack": "3.8.1" 
} 

Answer 1

uglifyjsにnameCache値を送信しなかったwebpack-uglifyjsプラグインにバグがありました。このバグはver 1.1.0で修正されています。

nameCacheを作成し、別のプラグインを使用してファイルに保存する必要があります。

これはwebpack.config.jsに入る：

const WriteNameCachePlugin = require(‘./write-name-cache-plugin’); 
    var nameCache = JSON.parse(fs.readFileSync(path.join(process.cwd(),“uglify-name-cache.json”), “utf8")); 

... 

    new UglifyJsPlugin({ 
     “test”: /\.js$/i, 
     “extractComments”: false, 
     “sourceMap”: true, 
     “cache”: false, 
     “parallel”: false, 
     “uglifyOptions”: { 
     “output”: { 
      “ascii_only”: true, 
      “comments”: false 
     }, 
     “ecma”: 5, 
     “warnings”: false, 
     “ie8": false, 
     “nameCache”: nameCache, 
     “mangle”: { 
      properties: { 
       regex: /^my_[^_]{1}/, 
       reserved: [“$”, “_”] 
      } 
     }, 
     “compress”: {} 
     } 
    }), 
... 

これは

const fs = require(‘fs’); 

    var opt; 

    function WriteNameCachePlugin(options) { 
     opt = options; 
    } 


    WriteNameCachePlugin.prototype.apply = function(compiler) { 
     compiler.plugin(‘done’, function() { 
      fs.writeFileSync(opt.fileName, JSON.stringify(opt.nameCache, null, 4), “utf8"); 
     }); 
    }; 

    module.exports = WriteNameCachePlugin; 

Answer 2

WebPACKのは、それを使用し、uglify og optimizeを提供するが、私はそれがあなたのように動作保証されていませんよ。

const {optimize} = require("webpack") 

new optimize.UglifyJsPlugin({ 
    beautify: false, 
    output: { 
     comments: false 
    }, 
    mangle: { 
     screw_ie8: true 
    }, 
    compress: { 
     screw_ie8: true, 
     warnings: false, 
     conditionals: true, 
     unused: true, 
     comparisons: true, 
     sequences: true, 
     dead_code: true, 
     evaluate: true, 
     if_return: true, 
     join_vars: true, 
     negate_iife: false 
    } 
    })