Babel 7: Uncaught ReferenceError после переноса модуля - PullRequest
Новая
       8

Babel 7: Uncaught ReferenceError после переноса модуля

0 голосов
/ 22 октября 2018

Мой проект расширения Chrome использует модуль Chrome-Promise из https://github.com/tfoxy/chrome-promise/blob/master/chrome-promise.js, чтобы пообещать функции стиля обратного вызова Chrome API.

Транспортировка проекта с помощью Babel 6 всегда работала нормально.Недавно я перешел на Babel 7. С тех пор, когда я разрешаю Babel передавать файл chrome-prom.js, это приводит к ошибке « Uncaught ReferenceError: ChromePromise не определено » при запуске расширения.,Программа работает хорошо, когда я оставляю chrome-proms.js без изменений.

Вот выдержка из моего 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" 
    }]
  },

и один из моих package.jsonс настройками Babel: 

{
  "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, ошибка все равно возникает, когда я деактивирую его.

EDIT Проверитьминимальное репо, которое я сделал на github.com/Steve06/chrome-promise-babel-7-issue-repo

1 Ответ

0 голосов
/ 01 ноября 2018
По умолчанию

@babel/env преобразует ваши файлы в commonjs по умолчанию, что требует включения передаваемых файлов require или import.Чтобы сделать это совместимым с вашим расширением Chrome, вам нужно перенести файлы как umd модуль.Поместите это в ваш package.json: 

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

Вы также должны знать, что source/chrome-promise.js уже является umd модулем, поэтому его на самом деле не нужно переносить.

...