时间戳

首页 > 解决方案 > 使用 jQuery 和 Popper.js (svelte) 引导

jquery - 使用 jQuery 和 Popper.js (svelte) 引导

问题描述

我想将带有 jQ​​uery 和 Popper.js 的 Bootstrap 4 添加到 RollupJS。

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

我也在使用 Svelte 汇总模板。

标签： jquerybootstrap-4svelterollupjspopper.js

解决方案

如果我对您的理解正确，您正在使用默认的 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 required jquery and popper.js。

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

推荐阅读