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 的更改不起作用。