Babel 7：在转译模块后出现未捕获的引用错误

Question

Babel 7：在转译模块后出现未捕获的引用错误

javascriptwebpackgoogle-chrome-extensionbabeljschrome-promise

5

我的Chrome扩展项目使用来自https://github.com/tfoxy/chrome-promise/blob/master/chrome-promise.js的Chrome-Promise模块，以将Chrome API的回调函数转换为Promise风格的函数。

使用Babel 6编译该项目一直很好。最近我升级到了Babel 7。自那时起，当我允许chrome-promise.js文件被Babel转译时，在运行扩展程序时会出现“未捕获的引用错误：ChromePromise未定义”。如果我保持chrome-promise.js不被转译，则程序可以正常工作。

以下是我的webpack配置js文件的摘录：

module.exports = {
  mode: 'production',
  entry: {
    cs: ['./build/cs.js'],
    bg: ['./build/bg.js'],
    popup: ['./build/popup.js'],
    chromepromise: ['./build/chromepromise.js']
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js'
  },
  module: {
    rules: [{ 
      test: /\.js$/, 
      exclude: [/node_modules/],
      loader: "babel-loader" 
    }]
  },

以下是带有Babel设置的我的一个package.json：

{
  "name": "Test_CRX",
  "version": "1.0.0",
  "main": "cs.js",
  "scripts": {
    "build": "node build",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@babel/runtime": "^7.1.2",
    "archiver": "^3.0.0",
    "babel-polyfill": "^6.26.0",
    "babel-regenerator-runtime": "^6.5.0",
    "chrome-promise": "^3.0.1",
    "terser": "^3.10.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/plugin-transform-modules-umd": "^7.1.0",
    "@babel/plugin-transform-regenerator": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-add-module-exports": "^1.0.0",
    "shelljs": "^0.8.1",
    "terser-webpack-plugin": "^1.1.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  },
  "babel": {
    "presets": [
      [
        "@babel/env",
        {
          "targets": {
            "chrome": 60
          }
        }
      ],
      "@babel/react"
    ],
    "plugins": [
    ]
  }
}

注意：虽然我使用Terser来压缩JS代码，但当我停用它时，错误仍会发生。

编辑：请查看我在github.com/Steve06/chrome-promise-babel-7-issue-repo上创建的最小存储库。

- Steve06

1

你如何在项目中引入 ChromePromise？是通过 import 还是 script？ - kkkkkkk

通过扩展的manifest.json文件中的background -> scripts键，像这样： "background":{ "scripts":["chrome-promise.js","bg.js"] } - Steve06

文件名是否正确？ - kkkkkkk

是的，我知道我在原帖中发布了没有破折号的 Chrome Promise，但实际文件名和 manifest.json 中对它的引用始终保持一致。我现在甚至创建了一个最小化的仓库来说明这个问题，因为我也在 Github 上向 Babel 制作者提出了这个问题。请查看：https://github.com/Steve06/chrome-promise-babel-7-issue-repo - Steve06

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kkkkkkk · Accepted Answer

@babel/env预设默认将您的文件转译为commonjs，这需要使用require或import包含转译后的文件。为了使其与您的Chrome扩展程序兼容，您需要将文件转译为umd模块。请在您的package.json中添加以下内容：

"presets": [
  [
    "@babel/env",
    {
      "targets": {
        "chrome": 60,
        "modules": "umd"
      }
    }
  ]
],

您还应该知道，source/chrome-promise.js 已经是一个 umd 模块，因此实际上不需要进行转译。