Electron环境下解决‘需合适loader处理文件类型’错误咨询

问题原因 #

报错里的_socket;属于ES6+的类字段声明语法，Webpack 4默认的Babel配置不会转译node_modules目录下的文件，但firebase-electron的dist代码里保留了未转译的该语法，导致Webpack无法解析。

解决步骤 #

• 修改Babel配置，让它处理firebase-electron包：
  在项目根目录的babel.config.js中添加include规则：

  module.exports = {
    presets: [
      '@vue/cli-plugin-babel/preset'
    ],
    include: [
      /node_modules\/firebase-electron/
    ]
  };
  

• 若上述方法无效，直接修改Webpack配置，给firebase-electron添加babel-loader：
  在vue.config.js中配置：

  module.exports = {
    configureWebpack: {
      module: {
        rules: [
          {
            test: /\.js$/,
            include: /node_modules\/firebase-electron/,
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ]
      }
    }
  };
  

• 安装必要依赖（未安装过的话）：

  yarn add @babel/preset-env --dev
  

• 重启开发服务，重新构建项目：

  yarn electron:serve
  

备选方案 #

如果上述配置仍有问题，可以尝试降级firebase-electron到更早版本，或者查看该包的package.json，确认是否有预转译的CommonJS版本入口，切换引入路径。

内容的提问来源于stack exchange，提问作者m-ogawa