terser-webpack-plugin 选项的范围问题

Question

我有一种情况，我没有正确配置 Terser，这导致我的页面的压缩版本中断。 我的问题是我的 index.js 中有一些功能声明。 这些声明需要可从 Bootstrap 模式 windows 访问，稍后可以加载。

例如，在我的index.js中有一个 function 声明如下：

function doThis() { }

然后，比如说，用户在模态 window 中打开一个地址表单，并加载一个名为“address-form.js”的不同 javascript 文件。 在这种形式中，有一个按钮带有一个调用doThis()的 onclick 处理程序。 onclick 处理程序位于“address-form.js”中，但能够访问父 index.js 中的doThis() 。 当 index.js 未压缩时，该按钮可以正常工作。 但是在它被压缩之后，我得到一个错误，说doThis()不存在。

我认为这是一个范围界定问题，因为我确实在index.js中看到了doThis()声明，但它似乎被包裹在一堆括号中。 我不确定如何使 doThis() 的 scope 成为顶级 window。 index.js中的数百个 function 声明和变量存在相同的范围界定问题，因此我正在寻找一种解决方案，我不必对庞大的文件进行太多修改。

请注意，如果我将 function 声明更改为表达式，它似乎确实有效：

window.doThis = function() {
}

但是，由于文件中有数百个vars和const和let变量（除了数十个 function 声明），对我来说，更改所有这些变量的 scope 以使压缩工作是不切实际的。

这是我的 webpack.config.js：

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

module.exports = {
  entry: glob.sync('./js/Pages/*.js').reduce((object, element) => {
    object[path.parse(element).name] = element
    return object
  }, {}),
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './js/Pages/minified')
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        test: /\.js(\?.*)?$/i,
        terserOptions: {
          mangle: false,
          compress: true,
          keep_fnames: true,
          keep_classnames: true,
          ie8: false,
          safari10: false,
          toplevel: false
        }
      })
    ]
  },
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  ]
}

我正在运行的命令是：

webpack --mode=production --config webpack.config.js

解决方案

下面接受的解决方案是直接使用 terser-cli。 如果有人觉得它有帮助，我编写了一个小脚本，它在目录中的每个文件上运行 terser：

const fs = require('fs')
const path = require('path')
const exec = require('child_process').exec;
const Terser = require('terser')
const srcDir = '../js/Pages'
const destDir = '../js/Pages/minified'


function minifyPagesDir() {
  let srcFileNames = fs.readdirSync(srcDir).filter(path => path.match(/\.js$/)) || []
  let srcFilePaths = []
  
  let destFilePaths = srcFileNames.map((item, i) => {
    srcFilePaths[i] = `${srcDir}/${srcFileNames[i]}`
    return `${destDir}/${item}`
  })

  if (!fs.existsSync(destDir))
    fs.mkdirSync(destDir)
  
  srcFileNames.forEach((item, i) => {
    exec(
      `terser ${srcFilePaths[i]} -c -o ${destFilePaths[i]} --ecma 2021`,
      (error, stdout, stderr) => {
        if (error !== null)
            console.log(`RUHROH: ${error}`, ' stderr: ', stderr);
      }
    )

    console.log(`Minified '${srcFilePaths[i]}' to '${destFilePaths[i]}'!`)
  })
  console.log('Minification complete!')
}

minifyPagesDir()

Answer 1

我用你的配置创建了一个 repro 项目，并验证了你的问题不是由 terser 引起的，而是由 webpack 引起的。

我使用了以下测试文件：

function doThis() { }

禁用minimize且未设置minimizer ，这是使用 webpack 构建测试文件的结果：

/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
function doThis() { }
/******/ })()
;

如果我们重新格式化并删除注释，很明显文件中的所有内容都是死代码。 Webpack 是一个打包器，将所有东西都封装在一个IIFE 中。 这意味着函数不会被分配到全局作用域。

(() => {
  var __webpack_exports__ = {};
  function doThis() { }
})();

由于您没有导出任何内容或导致任何副作用，例如分配给window ， terser 将删除内容。 这是正确的，即使不删除它，您仍然会遇到相同的错误，因为 webpack 输出中的函数未分配给全局范围并且您的处理程序无法访问它。 使用 terser cli 压缩 webpack 的导出会导致一个空文件。

直接在测试输入文件上运行 terser cli，会产生所需的压缩输出：

function doThis(){}

你说你已经从命令行运行了 terser 并且遇到了与通过 webpack 打包和压缩时相同的问题。 你是通过 terser 还是 webpack 的输出来运行源文件？ 因为通过 terser 运行源文件应该会产生所需的输出。 请尝试运行terser foo/bar.js -c -o foo/bar.min.js并测试它是否解决了您的问题。

如果你想使用 webpack，你需要分配给window或者完全放弃使用全局作用域。

Answer 2

我不知道它是什么时候添加的，但是 webpack 有一个IIFE选项。 https://webpack.js.org/configuration/output/#outputiife

但不幸的是，它总是会生成不必要的代码var __webpack_exports__ = {} 。

我不知道如何删除该代码。 我想知道是否有一个选项。