如何使用 Webpack/Babel 处理空的 catch {} 块？

Question

我正在处理尝试运行本地开发环境时遇到的问题。我正在使用 Webpack 2 和 Babel 6。

我似乎不知道如何获取包含要解析的空捕获的包。

Babel 有插件可以做到这一点吗？我还需要做点别的吗？

[0] Module parse failed: C:\Users\PROJECT\node_modules\ssh2\lib\server.js Unexpected token (490:16)
[0] You may need an appropriate loader to handle this file type.
[0] |         try {
[0] |           socket.end();
[0] |         } catch {} << it's complaining about this section.
[0] |       },

.babelrc 文件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["add-module-exports"],
  "env": {
    "production": {
        "presets": ["react-optimize"],
        "plugins": [
          "babel-plugin-transform-remove-console",
          "babel-plugin-transform-remove-debugger",
          "babel-plugin-dev-expression",
          "add-module-exports"
        ]
    },
    "development": {
      "plugins": ["transform-exponentiation-operator"]
    },
    "test": {
      "plugins": [
        [
          "webpack-loaders",
          {
            "config": "webpack.config.node.js",
            "verbose": false
          }
        ],
        [
          "babel-plugin-module-alias",
          {
            "src": "test/electron/mockElectron",
            "expose": "electron"
          }
        ]
      ]
    }
  }
}

Webpack 开发配置：

/* eslint max-len: 0 */
import webpack from 'webpack';
import baseConfig from './webpack.config.base';

const config = {
  ...baseConfig,

  devtool: 'cheap-module-eval-source-map',

  entry: [
    'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr',
    '@babel/polyfill',
    './app/index'
  ],

  output: {
    ...baseConfig.output,
    publicPath: 'http://localhost:3000/dist/'
  },

  module: {
    ...baseConfig.module,
    loaders: [
      ...baseConfig.module.loaders,

      {
        test: /\.global\.css$/,
        loaders: [
          'style-loader',
          'css-loader?sourceMap'
        ]
      },

      {
        test: /^((?!\.global).)*\.css$/,
        loaders: [
          'style-loader',
          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
        ]
      }
    ]
  },

  plugins: [
    ...baseConfig.plugins,
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],

  target: 'electron-renderer'
};

export default config;

Webpack 基本配置：

import path from 'path';
import WebpackNotifierPlugin  from 'webpack-notifier';

export default {
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['babel-loader'],
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      loader: 'json-loader'
    }, {
        test: /\.cjs?$/,
        loaders: ['babel-loader']
      }
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.cjs'],
    mainFields: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  },
  plugins: [
    new WebpackNotifierPlugin({excludeWarnings: true})
  ],
  externals: [
  ]
};

相关套餐：

"@babel/core": "^7.9.0",
"@babel/plugin-transform-exponentiation-operator": "7.18.6",
"@babel/plugin-proposal-optional-catch-binding": "^7.18.6",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.19.0",
"@babel/preset-react": "^7.18.6",
"@babel/preset-stage-0": "^7.8.3",
"@babel/register": "^7.18.9",
"@babel/parser": "^7.19.0",
"@babel/eslint-parser": "^7.18.9",
"@babel/eslint-plugin": "7.18.10",
"babel-loader": "8.0.0",
"babel-plugin-add-module-exports": "1.0.4",
"babel-plugin-dev-expression": "0.2.1",
"babel-plugin-module-alias": "1.6.0",
"babel-plugin-transform-react-inline-elements": "7.0.0-beta.3",
"babel-plugin-transform-remove-console": "^6.9.4",
"babel-plugin-transform-remove-debugger": "^6.9.4",
"babel-plugin-webpack-loaders": "0.9.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-react-optimize": "1.0.*",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "~10.1.0",
"webpack": "2.7.0",
"webpack-dev-middleware": "2.0.6",
"webpack-hot-middleware": "2.25.2"

导致问题的软件包是 ssh2 post 0.8.9。从 1.0.0 开始的任何版本。从 1.0.0 开始，这些文件似乎出现了很多 catch {} 情况。

Answer 1

我在你的babel配置中没有看到

@babel/plugin-proposal-optional-catch-binding

，请确保你有它在

plugins

选项中

{
  "plugins": ["@babel/plugin-transform-optional-catch-binding"]
}

参考文档：https://babeljs.io/docs/babel-plugin-transform-optional-catch-binding