如何使用Parcel Bundler包含外部JS库，如jQuery、jQuery DataTable、Charts.JS

Question

我刚开始使用package，需要一些帮助：我在网站开发中使用了一些外部JS库。那么，我如何将所有这些都包括在我的构建中呢？注意：我已经使用了像这个一样的所有CDN URL

<script defer src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script defer src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script&gt;
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="js/main.js" defer></script>

Answer 1

这很容易。

• 安装所需的依赖项

npm i jquery

• 在代码中使用它

import * as $ from 'jquery'

就是这样。捆绑甚至缩小，Parcel都会自动完成。

如果你喜欢将它们保存在CDN上，只需将它们包含在index.html中并保存在那里即可。如果需要IntelliSense，可以使用npm i @types/jquery -D安装类型。

如果你不直接在代码中使用某些东西，你可以与供应商创建单独的文件，并将其直接导入HTML:

import 'jquery';
import 'popper.js';
import 'bootstrap';

<script src="./vendors.ts"></script>

你可以在这里找到现实生活中的例子：https://github.com/Drag13/perfrunner/blob/development/packages/perfrunner-reporters/src/reporters/html/index.html

重要提示：不要混合使用这些方法，您将执行双重加载。

Answer 2

带地块v2(parcel@next)我从CDN jquery加载，这是我的设置。

index.html

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="dist/main.js" type="text/javascript" charset="utf-8" async defer></script>

package.json

"alias": {
"jquery": {
"global": "$"
}
}
...

main.js

import $ from 'jquery'; $('id').toggle() // use jquery

我像一样编译它

parcel build main.js

最终结果是我的代码，jquery必须在之前加载。注意，我的例子没有针对异步负载等进行优化。

ps：我不得不说我不是包裹方面的专家(开始学习(，但这对我有用。