在 Electron 项目中将 s3-sync-client 和 @aws-sdk/client-s3 与 webpack 一起使用时出错

Question

我正在开发一个 Electron 项目，并且我已经为其配置了 webpack。我最近使用 npm 安装了 s3-sync-client 和 @aws-sdk/client-s3，但是当我尝试运行该项目时，我在控制台中收到以下错误：

[0] Module parse failed: Unexpected token (8:41)
[0] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[0] |         this.maxAttemptsProvider = maxAttemptsProvider;
[0] |         this.mode = RETRY_MODES.ADAPTIVE;
[0] >         const { rateLimiter } = options ?? {};
[0] |         this.rateLimiter = rateLimiter ?? new DefaultRateLimiter();
[0] |         this.standardRetryStrategy = new StandardRetryStrategy(maxAttemptsProvider);
[0]  @ ./node_modules/@aws-sdk/util-retry/dist-es/index.js 1:0-40 1:0-40
[0]  @ ./node_modules/@aws-sdk/middleware-retry/dist-es/delayDecider.js
[0]  @ ./node_modules/@aws-sdk/middleware-retry/dist-es/index.js
[0]  @ ./node_modules/@aws-sdk/client-s3/dist-es/S3Client.js
[0]  @ ./node_modules/@aws-sdk/client-s3/dist-es/index.js
[0]  @ ./app/aws/index.js
[0]  @ ./app/App.js
[0]  @ ./app/main.js
[0]  @ multi @babel/polyfill ./app/main.js
[0] 
[0] ERROR in ./node_modules/@aws-sdk/middleware-user-agent/dist-es/user-agent-middleware.js 9:30
[0] Module parse failed: Unexpected token (9:30)
[0] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[0] |         return next(args);
[0] |     const { headers } = request;
[0] >     const userAgent = context?.userAgent?.map(escapeUserAgent) || [];
[0] |     const defaultUserAgent = (await options.defaultUserAgentProvider()).map(escapeUserAgent);
[0] |     const customUserAgent = options?.customUserAgent?.map(escapeUserAgent) || [];
[0]  @ ./node_modules/@aws-sdk/middleware-user-agent/dist-es/index.js 2:0-40 2:0-40
[0]  @ ./node_modules/@aws-sdk/client-s3/dist-es/S3Client.js
[0]  @ ./node_modules/@aws-sdk/client-s3/dist-es/index.js
[0]  @ ./app/aws/index.js
[0]  @ ./app/App.js
[0]  @ ./app/main.js
[0]  @ multi @babel/polyfill ./app/main.js

图片链接错误

我已经检查了我的 webpack 配置，并且为其他文件类型设置了加载器，但似乎这些包没有被正确处理。谁能帮我解决这个问题吗？

这是我的存储库的链接以供参考。

预先感谢您的任何帮助！

我尝试在 webpack 中进行相应的更改。但似乎没有任何作用。

Answer 1

我用 chatGpt 解决了这个问题。但这是经过实际测试的，所以确实有效。

使用此 webpack 配置作为 js 解析规则：

  { 
    test: /\.js$/,
    exclude: /node_modules\/(?!(aws-sdk|@aws-sdk)\/).*/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env']
      }
    }
  },

我们使用负前瞻 (?!(aws-sdk|@aws-sdk)/) 来匹配所有不以“aws-sdk/”或“@aws-sdk/”开头的 node_modules 目录。末尾的 .* 与路径中的任何剩余字符匹配。这将排除除 AWS 开发工具包包之外的所有 node_modules 目录。

我不知道为什么 AWS 不发送转译的 js 文件，但像这样我们告诉 webpack 为我们转译它。