这篇文章写什么

如何解决 npm 包 node-fetch 报错 Expected signal to be an instanceof AbortSignal 的问题

先直接上解决方案(太长不看)(TL;DR)

Electron.js 里的 vue.config.js 这样配置:

pluginOptions: {
    electronBuilder: {
    chainWebpackMainProcess: config => {
        config.plugins.delete('uglify')
        config.plugin('uglify').use(TerserPlugin, [{
          terserOptions: {
            mangle: false,
            sourceMap: true,
            compress: false,
            keep_classnames: true,
            keep_fnames: true,
            output: {
              comments: false,
            },
          }
        }])
        config.optimization.minimize(false);
        console.log(config.toString())
        }
    }
}

这个配置的意义是:

webpack 打包代码时,就不会去混淆代码,
改成 var a=v;class S 这样的单字母变量名/函数名/类名。

后文是解决问题的过程,不喜欢看长文的可以不看

写这篇文章的意义

我浪费了2天,
既然我解决了就把解决方案写出来
希望你只需要5分钟就能解决

这篇文章对谁有用?

开发者

我想达到的目的(重点)

用户拖入文件到桌面软件里,
之后文件上传到 Azure Storage Account 的 Container 里

注:这个所谓『Storage Account』『Container』的概念
和 Amazon S3, 阿里云 OSS, 七牛云空间存文件, 腾讯云 COS, Google Cloud Storage 本质上是一回事。
就是一个能存文件的地方而已。

环境

在用 Electron.js 8.0.0 开发桌面应用

具体环境

  1. package.json 在用 "@azure/storage-blob": "12.1.1" 因为我需要上传文件到 Azure
  2. Electron 有 Main Process / Render Process 的概念,这一次出错的代码是跑在 Main Process、因为只有 Main Process 才能写 Node.js 代码,上传需要 Node.js
  3. "vue-cli-plugin-electron-builder": "^1.4.5", 用了它来打包
  4. 用的是 Vue.js "vue": "^2.6.11",

遇到的问题

  1. 开发时毫无问题,一切正常,可以上传文件到 Azure
  2. 但是,一旦打包 (运行npm run electron:build)
  3. 打包后的程序无法上传文件
这是 npm run electron:build 具体跑了啥

上传文件到 Azure 用的是这一段代码:

具体报错截图

这是打包后的 Electron.js 应用

解决过程1:

查阅 "vue-cli-plugin-electron-builder": "^1.4.5", 的文档
发现了 vue.config.js 里面可以配置 chainWebpackMainProcess
它的意义是,这个 webpack 配置只会应用于 main process 的 bundle

解决过程2

去掉了所有会把主进程代码进行 minify 和混淆的配置,
发现问题解决了,可以上传了。

但是,因为文件没有 minify, 从 982kb 变成了 2.3mb。
里面空格回车注释啥都有,我们不需要那么多东西,只需要 webpack 不要把变量名,类名,function name 都瞎改成 e,h,x,v 这样的混淆名

解决过程3

仔细研读了 webpack-chain 的文档和例子,经过多番尝试
终于配置对了:

  1. 代码的确压缩了,去除了所有空格,回车,注释
  2. 没有混淆(修改)变量名,函数名,类名

问题就此解决

题外话,node-fetch 报这个错误的根本原因是:

https://github.com/node-fetch/node-fetch/issues/784
(这是讨论帖)

它这里写死了 === 'AbortSignal'
webpack 混淆名字之后,这个 === 就不是 true 了,自然会报错

全文完

2020-4-24 01:57 趁着记忆还新鲜赶紧写下了这篇博客。
感谢阅读