如何在 Angular 4.0 中使用正则表达式设置 UglifyJsPlugin 来修改变量

Question

我想丑化 Angualr 4 输出文件并修改以 my_ 开头的特定变量。下面的命令行正是我想要的。我只是希望能够告诉 angular-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

目前，我使用弹出命令从 angular-cli 导出 webpack.config.js。但我只是找不到任何有关如何告诉自动生成文件的 uglifyJsplugin 正则表达式和名称缓存参数的文档。这两点对于我们的应用程序都至关重要。

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": {}
  }
}),

这是关于如何使用 angualr pop 捕获自动生成的 weppack.config 并修改它的博客文章。Angular-cli：如何忽略类名被缩小但找不到有关如何为 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

webpack-uglifyjs 插件中存在一个错误，它没有将 nameCache 值传输到 uglifyjs。此错误已在 1.1.0 版本中修复。

\n\n

nameCache 必须被打包，然后使用另一个插件保存到文件中。

\n\n

这进入 webpack.config.js：

\n\n

   const WriteNameCachePlugin = require(\xe2\x80\x98./write-name-cache-plugin\xe2\x80\x99);\n    var nameCache = JSON.parse(fs.readFileSync(path.join(process.cwd(),\xe2\x80\x9cuglify-name-cache.json\xe2\x80\x9d), \xe2\x80\x9cutf8"));\n\n...\n\n    new UglifyJsPlugin({\n      \xe2\x80\x9ctest\xe2\x80\x9d: /\\.js$/i,\n      \xe2\x80\x9cextractComments\xe2\x80\x9d: false,\n      \xe2\x80\x9csourceMap\xe2\x80\x9d: true,\n      \xe2\x80\x9ccache\xe2\x80\x9d: false,\n      \xe2\x80\x9cparallel\xe2\x80\x9d: false,\n      \xe2\x80\x9cuglifyOptions\xe2\x80\x9d: {\n        \xe2\x80\x9coutput\xe2\x80\x9d: {\n          \xe2\x80\x9cascii_only\xe2\x80\x9d: true,\n          \xe2\x80\x9ccomments\xe2\x80\x9d: false\n        },\n        \xe2\x80\x9cecma\xe2\x80\x9d: 5,\n        \xe2\x80\x9cwarnings\xe2\x80\x9d: false,\n        \xe2\x80\x9cie8": false,\n        \xe2\x80\x9cnameCache\xe2\x80\x9d: nameCache,\n        \xe2\x80\x9cmangle\xe2\x80\x9d: {\n          properties: {\n              regex: /^my_[^_]{1}/,\n              reserved: [\xe2\x80\x9c$\xe2\x80\x9d, \xe2\x80\x9c_\xe2\x80\x9d]\n          }\n        },\n        \xe2\x80\x9ccompress\xe2\x80\x9d: {}\n      }\n    }),\n...\n

\n\n

这进入 write-name-cache-plugin.js

\n\n

   const fs = require(\xe2\x80\x98fs\xe2\x80\x99);\n\n   var opt;\n\n   function WriteNameCachePlugin(options) {\n        opt = options;\n    }\n\n\n   WriteNameCachePlugin.prototype.apply = function(compiler) {\n        compiler.plugin(\xe2\x80\x98done\xe2\x80\x99, function() {\n            fs.writeFileSync(opt.fileName, JSON.stringify(opt.nameCache, null, 4), \xe2\x80\x9cutf8");\n        });\n    };\n\n   module.exports = WriteNameCachePlugin;\n

\n