Bootstrap 与 jQuery 和 Popper.js (svelte)

Question

我想将带有 jQ​​uery 和 Popper.js 的 Bootstrap 4 添加到 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添加一个链接到汇总生成的 extra.css：

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

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

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