如何在 Svelte JS 应用程序中添加引导模块？

Question

我对苗条很陌生（就像我们中的许多人 ^^ ），我没有设法将引导程序添加到我的应用程序中。试图运行“npm add bootstrap”，但它说我需要对等 jquery 依赖。这是终端渲染

我不明白的是为什么添加了包并且我仍然不能使用引导程序类。第二点，为什么要讨论对等依赖？这里的链接是什么？我不知道我是否遗漏了什么，但如果你们得到了解决方案，那将会有很大帮助。谢谢

npm 添加引导程序

npm WARN bootstrap@4.4.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.

npm WARN svelte-app@1.0.0 No repository field.
npm WARN svelte-app@1.0.0 No license field.

+ bootstrap@4.4.1
added 1 package from 2 contributors and audited 9125 packages in 8.047s
found 0 vulnerabilities```

Answer 1

您的问题是安装bootstrap到 node_modules 中不会自动将文件包含在您的应用程序中。有几种不同的方法可以实现这一点。

选项 1：将文件复制到/public手动

1. 下载引导程序文件并将它们放在public您的 svelte 项目的文件夹中。
2. 在 .css 文件中添加 css 链接public/index.html。<link rel='stylesheet' href='bootstrap/dist/css/bootstrap.min.css'>.

这种方法的缺点是您需要将 bootstrap 文件夹提交到您的版本控制系统，这通常是不受欢迎的。

选项 2：将文件复制到/public使用汇总

1. 安装汇总插件副本
2. 更新rollup.config.js以包含copy插件。以下是来自全新 svelte 安装的 rollup.config.js 文件中重要部分的片段。

//...
import copy from 'rollup-plugin-copy'

export default {
    //...
    plugins: [
        //...
        copy({
            targets: [{ 
                src: 'node_modules/bootstrap/dist/**/*', 
                dest: 'public/vendor/bootstrap' 
            }]
        }),
       //...
    ],
    //...
};

3. 在 .css 文件中添加 css 链接public/index.html。<link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>