использование участка для получения зависимостей машинописи

Question

Я использую посылку для обработки машинописи для веб-расширения.JQuery и его определения типов устанавливаются через npm.Вверху моего файла машинописи у меня есть:

import $ from "jquery";
import "bootstrap";

Но во время выполнения Chrome жалуется, что jquery не определен.Минимальный пример для воспроизведения проблемы на git: https://github.com/lhk/parcel_jquery_bug_demo

git clone https://github.com/lhk/parcel_jquery_bug_demo
cd parcel_jquery_bug_demo
npm install
parcel build src/manifest.json

Теперь вы можете открыть Chrome и загрузить папку dist

Репозиторий git содержит:

src / manifest.json

{
  "manifest_version": 2,
  "name": "pc",
  "version": "0.0.1",
  "description": "none",
  "author": "",
  "content_security_policy":"script-src 'self'; object-src 'self'",
  "content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": [
         "./content/index.ts"]
    }
  ]
}

src / content / index.ts

import $ from "jquery";
import "bootstrap";

$(function () {
  $('[data-toggle="popover"]').popover();
});

. / Package.json

{
  "name": "pc",
  "version": "0.1.0",
  "description": "",
  "author": "",
  "license": "",
  "devDependencies": {
    "parcel-plugin-web-extension": "^1.4.0",
    "typescript": "^3.1.3"
  },
  "dependencies": {
    "@types/bootstrap": "^3.3.7",
    "@types/jquery": "^3.3.10",
    "bootstrap": "^3.3.7",
    "jquery": "^3.3.1"
  }
}

После загрузки расширения в Chrome вы можете загрузить любой веб-сайт.Сообщение об ошибке:

Uncaught ReferenceError: jQuery не определен

Я использую:

• Посылка 1.10.1
• Node v8.12.0
• npm 6.4.1
• ubuntu 18.04.1 64bit
• chrome 70

Я думаю, что это проблемасвязано с импортом бутстрапа.Следующий код работает:

import $ from "jquery";

//import "bootstrap";

$(function () {
  //$('[data-toggle="popover"]').popover();
  $('[data-toggle="popover"]').click(function(){});
});

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

Answer 1

Parcel фактически не принимает участия в этом вопросе, в основном jQuery / Bootstrap полагается на функцию $ и jQuery, предоставляемую в глобальной области видимости.

Это довольно просто заархивировать с помощьювыполняя следующее (только для JS, поскольку TS будет жаловаться на то, что у окна нет свойства $ и jQuery):

import jquery from "jquery";
window.$ = window.jQuery = jquery;
import "bootstrap";

Но поскольку вы используете TypeScript , вынужно будет сделать больше для того, чтобы поддержка linting и intellisense также работала.

1. Установите файл определения TypeScript npm install --save-dev @types/jquery @types/bootstrap
2. , используйте import * as $ from 'jquery'; для его импорта.

3. Сконфигурируйте библиотеки для API DOM, так как они не включены по умолчанию для TypeScript, это позволит вам использовать правильные window и document, но вам нужно изменить window на (<any> window)

   tsconfig.json

   {
     "compilerOptions": {
       //...
       "lib": ["dom"],
       //...
     },
   }  
   

Answer 2

Я добавил плагин babel ( babel-plugin-auto-import ) с этим .babelrc

  {
    "plugins": [[
      "auto-import", {
        "declarations": [
          { "anonymous": ["jQuery"], "path": "jquery" }
        ]
      }
    ]]
  }

Кажется, все работает.

Новый пакет.json

{
  "name": "pc",
  "version": "0.1.0",
  "description": "",
  "author": "",
  "license": "",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-auto-import": "^0.9.3",
    "parcel-plugin-web-extension": "^1.4.0",
    "typescript": "^3.1.3"
  },
  "dependencies": {
    "@types/bootstrap": "^3.3.7",
    "@types/jquery": "^3.3.10",
    "bootstrap": "^3.3.7",
    "jquery": "^3.3.1"
  }
}