Bootstrap 与 jQuery 和 Popper.js（苗条）

Question

我想将 Bootstrap 4 和 jQuery 和 Popper.js 添加到 RollupJS。

如何将它们添加到捆绑器中？

我也在使用 Svelte 汇总模板。

Answer 1

如果我没理解错的话，你正在使用默认的 Svelte Rollup 模板（可能通过 npx degit sveltejs/template），并且你想在你的项目中添加对 Bootstrap 的支持。

如果是这样的话，那我觉得应该是...

npm i bootstrap
npm i jquery
npm i popper.js
npm i --save-dev rollup-plugin-css-only

在您的 rollup.config.js 中，添加：

import css from 'rollup-plugin-css-only';

与其余进口商品一起位于顶部。另外，在 plugins 数组中，添加：

plugins: [
  ...
  production && terser(),
  css({ output: 'public/build/extra.css'})
],

在 src/main.js 添加导入：

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

并在 public/index.html 中添加一个 link 到生成的汇总中 extra.css:

<link rel='stylesheet' href='/build/extra.css'>

尽管我没有使用 jquery 或 popper.js，但至少可以通过汇总为我工作 bootstrap。事实上，我在搜索 opposite 问题时发现了这个问题——How to use rollup with bootstrap without required jquery 和 popper.js.

请记住，您需要重新启动开发服务器，因为自动重新加载对 rollup.config.js 的更改不起作用。

Bootstrap 与 jQuery 和 Popper.js（苗条）

Bootstrap with jQuery and Popper.js (svelte)

jquery

rollupjs

bootstrap-4

svelte

popper.js