标签: terser

我最近添加了 terser-webpack-plugin 来缩小我的create react app代码。但是在构建项目时，我得到了一个错误，如TypeError: Cannot read property 'javascript' of undefined. 以下是我的控制台中的一些日志。请让我知道任何解决方法或更改来修复它。

控制台日志：

D:\a>npm run build:qa
> a@1.0.0 build:qa D:\a
> cross-env webpack --env.ENVIRONMENT=qa --config ./webpack.config.js --mode production --progress --colors
D:\a\node_modules\terser-webpack-plugin\dist\index.js:400
      const hooks = compiler.webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation);
                                     ^
TypeError: Cannot read property 'javascript' of undefined
    at D:\a\node_modules\terser-webpack-plugin\dist\index.js:400:38

我使用的 webpack 版本：

"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

类名在缩小期间被破坏，但不应该这样做

我尝试在按照此处https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions所述进行修改时设置保留属性。不幸的是，这对我不起作用。

我在 bitbucket 上有一个包含问题的仓库，https: //bitbucket.org/JohanBeumer/angular-ivy-aot/src/master/ 。

我注意到我没有向 bitbucket 提交最新的源代码是一个错误。抱歉，我更新了 repo。

我在该 repo 中使用的自定义 webpack 配置如下：

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
                    compress: false,
                    keep_fnames: true,
                    keep_classnames: true,
                    mangle: {
                        keep_fnames: true,
                        keep_classnames: true,
                        properties: {
                            reserved: ['Foo', 'BaseModel']
                        }
                    }
                }
            })
        ]
    }
};

我希望屏幕的标题显示类的名称，即“Foo”。

我使用以下命令构建应用程序： ng build --prod --aot

我的实际问题是，如何防止 webpack minify 修改类名？

感谢 Tony Ngo 的回应。我按照您的建议添加了 keep_fnames 但不幸的是这并不能解决问题。现在我在控制台中收到以下错误：

生成的代码被缩小但几乎没有被破坏。这是它在谷歌浏览器中的样子（美化）：

所有属性名称，许多变量都有其原始名称。即使明确指定了 Terser 的 mangle 选项：

• mangle：真的，
• 源地图：假，
• keep_fnames：假，
• 顶层：真实，

这是 WebPack 配置：

const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/scripts/index.ts',
    devtool: 'inline-source-map',
    module: {
        rules: [        
            {
                test: /\.tsx?$/,                
                use: {
                    loader: 'ts-loader',
                    options: { configFile: 'tsconfig-build.json' }
                },
                exclude: /node_modules/,                
            },
        ],        
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ],
    },
    plugins: [ ],

    // PROBLEMS HERE:
    optimization: {        
        minimize: true,        
        minimizer: [new TerserPlugin({
            sourceMap: false, …

我正在使用 Vue CLI 3，我需要添加Terser Webpack 插件以从代码中删除console.log和注释。这不适用于我当前的设置 - 日志和评论仍在构建中。我的生产流程：

1. 跑 npm run build
2. 跑 serve -s dist

vue.config.js：

module.exports = {
  publicPath: "./"
}

webpack.config.js：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: { drop_console: true },
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          output: { comments: false },
          toplevel: false,
          nameCache: null,
          ie8: false, …

我的 React 项目中的一个节点模块使用 vm.runincontext，并且此代码在缩小时无法运行。我当前的解决方案是关闭缩小，它的工作原理只是使加载花费很长时间:(。我想尝试不使用排除来缩小这个特定的节点模块，但无论我在那里传递什么，它都不会看起来它正在工作。这个解决方案看起来可以工作，如果我传递一个始终与 true 匹配的正则表达式，我的生产构建可以工作，但我不知道我现在是否需要创建一个评估每个文件的正则表达式

这是非常令人困惑的，因为我可以放置exclude:/(.*)/并且程序可以工作，但是如果我尝试放置与文件相关的任何内容，例如exclude:/node_modules/or /kekule/（模块的名称），那么这将不起作用。更奇怪的是我可以通过逆和exclude:/^((?!node_modules).)*$/ 或偶exclude:/^((?!kekule).)*$/,并且它们都有效

      optimization: {
        minimizer: [
          new TerserPlugin({
            exclude: /node_modules/,
          }),
        ],
      },
    }; 

也尝试过使用这个它也不太工作

optimization: {
      minimize:isEnvProduction,
      minimizer: [
        // This is only used in production mode
        new TerserPlugin({
          terserOptions: {
            module: {
              noParse: (content) => /kekule/.test(content)
            },
            parse: {...

还尝试将 module:{noParse...} 放置在层次结构中的 module.exports 下，但它也不起作用

有小费吗？谢谢

我正在使用 Angular 9，我有一些这样的代码：

(features.ts, autogenerated:)
// AUTO-GENERTATED FILE. DO NOT EDIT!
export const Features = {
  // Whether to reveal our Secret New Feature to the world
  ENABLE_SECRET_FEATURE: 1
};

(mycode.ts, app code)
import { Features } from 'generated/features.ts';

function doSomething() {
  if (Features.ENABLE_SECRET_FEATURE) {
    doAIBlockChainARThing();
  } else {
    doSomeBoringOldCRUDThing();
  }
}

我希望发出的代码是

function doSomething() {
    doAIBlockChainARThing();
}

或者

function doSomething() {
    doSomeBoringOldCRUDThing();
}

但不是两者兼而有之。

是否有调用ng build它会发生这种情况？我知道 uglify 可以做到这一点，而 Closure Compiler 当然可以。我目前的调用是：ng build --aot=true --stats-json --buildOptimizer=true --optimization=true …

所以我试图运行 webpack 来编译我的代码，但是当我运行时npx webpack --config webpack.config.js出现以下错误：

ERROR in main.js from Terser
Invalid assignment [main.js:78674,15]

没什么可看的，我什至不知道该往哪里看。有没有人有任何想法可能导致这种情况？

这是我的 webpack 配置：

const path = require('path');

module.exports = {
    entry: './server.js',
    target: "node",
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "/public/"
    },
    module:{
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-syntax-dynamic-import']
                    }
                }
            }
        ]
    },
    resolve: {
        alias: {
            'express-handlebars': 'handlebars/dist/handlebars.js'
        }
    }
};

谢谢！

我正在尝试使用 grunt 和 terser 缩小 angularjs 应用程序。我首先使用 uglifiy-es 但后来读到它有一些问题。所以我尝试了更简洁。但是输出没有给我缩小的文件。

gruntfile.js

    module.exports = function(grunt) {
  grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
        //grunt task configuration will go here
        ngAnnotate: {
          options: {
              singleQuotes: true
          },
          app: {
              files: {
                  './public/min-safe/js/_config_min.js': ['./controllers/_config.js'],
                  './public/min-safe/js/ctrl_accountingdashboard.js': ['./controllers/ctrl_accountingdashboard.js'], 

              }
          }
      },
      concat: {
        js: { //target
            src: ['./public/min/app.js', './public/min-safe/js/*.js'],
            dest: './public/min/app.js'
        }
    },
    terser: {
      options: {},
      files: {
        './public/min/app.js': ['./public/min/app.js'],
      },
    }
  });

  //load grunt tasks
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-terser');
  grunt.loadNpmTasks('grunt-ng-annotate'); 

  //register grunt default task
  grunt.registerTask('default', ['ngAnnotate', 'concat', 'terser']);

}

我正在使用 VUE CLI 3，我需要从构建的产品中删除console.log和代码注释。这是我的Terser设置：

webpack.config.js在SRC文件夹

    module.exports = {
mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {drop_debugger},
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          output: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: false,
          safari10: false,
        },
      }),
    ],
  },
};

我的生产工作流程：运行npm run build-> cd dist->npm run serve

生产版本仍会输出所有console.log …

我在 ES 模块中定义了一个函数，我想确保内联。当它仅在一个块中使用时，这工作正常，但是如果我从两个单独的块调用该函数，webpack 会生成阻止内联的模块查找模式：

// common.js
export function inlineMe(x) {
  return x;
}

// main.js
import {inlineMe} from './common';
import('./ext').then(ext => {
  if (inlineMe(true)) {
    ext.f();
  } else {
    console.log('not inlined');
  }
});

// ext.js
import {inlineMe} from './common';
export function f() {
  console.log(inlineMe(true) ? 'inlined' : 'not inlined');
}

使用具有以下合理标准选项的 TerserPlugin 通过 webpack 运行它

// webpack.config.js
module.exports = {
  mode: 'production',
  entry: './main.js',
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {passes: 50, inline: true, unsafe: true},
        }, …