Как загрузить зависимость плагина от таблицы к json в Vue? - PullRequest
Новая
       73

Как загрузить зависимость плагина от таблицы к json в Vue?

1 голос
/ 02 мая 2020

Я пытаюсь выяснить, как использовать иерархические зависимости в узле.

Я строю расширение VueJs chrome, используя Vue CLI и vue -cli -plugin-browser-extension (https://www.npmjs.com/package/vue-cli-plugin-browser-extension). В фоновом файле мне нужно использовать две зависимости:

  1. jquery
  2. table-to- json (https://www.npmjs.com/package/table-to-json)

table-to- json требуется jquery для работы

Я установил две зависимости, используя установку узла, и запросил зависимости в фоновом файле. Но когда я пытаюсь запустить фоновый скрипт, я получаю эту ошибку:

background. js: 37 Uncaught ReferenceError: jQuery не определено в Object.f370 (background. js: 37) на n (фон. js: 1) на Object.fe77 (фон. js: 37) на n (фон. js: 1) на Object.1 (фон. js: 1) на n (фон. js: 1) на фоне. js: 1 на фоне. js: 1 f370 @ background. js: 37 n @ background. js: 1 fe77 @ background. js: 37 n @ background. js: 1 1 @ background. js: 1 n @ background. js: 1 (анонимный) @ background. js: 1 (анонимный) @ background. js: 1 DevTools не удалось загрузить SourceMap: не удалось загрузить содержимое для chrome -extension: //ljejdkiepkafbpnbacemjjcleckglnjl/js/background.js.map: ошибка HTTP: код состояния 404, net :: ERR_UNKNOWN_URL_SCHE

таблица-до-1066 * не может видеть jquery. Чего мне не хватает?

Это мой фоновый файл, пакет. json и vue .config. js:

backgroung. js

const jQuery = require('jquery'), $ = jQuery
const tableToJSON = require('table-to-json')

пакет. json

{
  "name": "test",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service build --mode development --watch",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "jquery": "^3.5.0",
    "table-to-json": "^1.0.0",
    "vue": "^2.6.11",
    "vuex": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-vuex": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "vue-cli-plugin-browser-extension": "~0.24.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

vue .config. js

module.exports = {
  pages: {
    popup: {
      template: 'public/index.html',
      entry: './src/popup/main.js',
      title: 'Popup'
    }
  },
  pluginOptions: {
    browserExtension: {
      componentOptions: {
        background: {
          entry:  'src/background.js'
        },
        contentScripts: {
          entries: {
            script: 'src/content-scripts/script.js'
          }
        }
      }
    }
  }
}

1 Ответ

1 голос
/ 02 мая 2020

Проблема не относится к зависимостям Node вообще. table-to-json является устаревшим jQuery плагином и использует jQuery глобальные переменные вместо JavaScript модулей. Он ожидает, что jQuery переменная будет существовать в области, где выполняется плагин.

Это может быть достигнуто путем явного предоставления jQuery глобальных переменных: 

window.$ = window.jQuery = require('jquery');

Или настройкой Webpack для переменной shim jQuery, либо глобально с ProvidePlugin, либо локально для table-to-json пакета с imports-loader. Последнее может быть достигнуто без изменения конфигурации Webpack при импорте плагина : 

require('imports-loader?jQuery=jquery!table-to-json');

Поскольку table-to-json не является модулем JavaScript, его не нужно импортировать в переменную потому что tableToJSON === undefined на импорт. Он должен использоваться как jQuery плагин, $(...).tableToJSONCell.

...