使用 parcel 引入 typescript 依赖项
using parcel to pull in typescript dependencies
我正在使用 parcel 处理 webextension 的打字稿。
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 is not defined
我正在使用:
- 包裹 1.10.1
- 节点 v8.12.0
- npm 6.4.1
- ubuntu 18.04.1 64 位
- chrome 70
我认为这个问题与 bootstrap 的导入有关。以下代码有效:
import $ from "jquery";
//import "bootstrap";
$(function () {
//$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').click(function(){});
});
所以我的 typescript 代码的依赖实际上是由 parcel 处理的。但是 bootstrap 还需要 jQuery 而这在某种程度上并不令人满意。
我用这个 .babelrc 添加了一个 babel 插件 (babel-plugin-auto-import)
{
"plugins": [[
"auto-import", {
"declarations": [
{ "anonymous": ["jQuery"], "path": "jquery" }
]
}
]]
}
似乎一切正常。
新建package.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"
}
}
Parcel 实际上与问题无关,主要是 jQuery/Bootstrap 依赖 $
和 jQuery
函数在全局范围内公开。
通过执行以下操作归档非常简单(仅适用于 JS,因为 TS 会抱怨 window 没有 属性 $
和 jQuery
) :
import jquery from "jquery";
window.$ = window.jQuery = jquery;
import "bootstrap";
但由于您使用的是 TypeScript,您还需要做更多工作才能使 linting 和智能感知支持正常工作。
- 安装 TypeScript 定义文件
npm install --save-dev @types/jquery @types/bootstrap
- 使用
import * as $ from 'jquery';
导入它。
配置 DOM api 的库,因为默认情况下不为 TypeScript 启用它们,这将允许您使用适当的 window
和 document
可是你
需要将 window
更改为 (<any> window)
tsconfig.json
{
"compilerOptions": {
//...
"lib": ["dom"],
//...
},
}
我正在使用 parcel 处理 webextension 的打字稿。 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 is not defined
我正在使用:
- 包裹 1.10.1
- 节点 v8.12.0
- npm 6.4.1
- ubuntu 18.04.1 64 位
- chrome 70
我认为这个问题与 bootstrap 的导入有关。以下代码有效:
import $ from "jquery";
//import "bootstrap";
$(function () {
//$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').click(function(){});
});
所以我的 typescript 代码的依赖实际上是由 parcel 处理的。但是 bootstrap 还需要 jQuery 而这在某种程度上并不令人满意。
我用这个 .babelrc 添加了一个 babel 插件 (babel-plugin-auto-import)
{
"plugins": [[
"auto-import", {
"declarations": [
{ "anonymous": ["jQuery"], "path": "jquery" }
]
}
]]
}
似乎一切正常。
新建package.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"
}
}
Parcel 实际上与问题无关,主要是 jQuery/Bootstrap 依赖 $
和 jQuery
函数在全局范围内公开。
通过执行以下操作归档非常简单(仅适用于 JS,因为 TS 会抱怨 window 没有 属性 $
和 jQuery
) :
import jquery from "jquery";
window.$ = window.jQuery = jquery;
import "bootstrap";
但由于您使用的是 TypeScript,您还需要做更多工作才能使 linting 和智能感知支持正常工作。
- 安装 TypeScript 定义文件
npm install --save-dev @types/jquery @types/bootstrap
- 使用
import * as $ from 'jquery';
导入它。 配置 DOM api 的库,因为默认情况下不为 TypeScript 启用它们,这将允许您使用适当的
window
和document
可是你 需要将window
更改为(<any> window)
tsconfig.json
{ "compilerOptions": { //... "lib": ["dom"], //... }, }