基于vue-sfc-rollup的Vue组件库引入Bootstrap的位置咨询

针对你的组件库场景，推荐在entry.esm.js中引入Bootstrap，具体分两种情况处理：

一、组件库必须依赖Bootstrap（样式/JS） #

如果你的组件需要用到Bootstrap的样式类或JS插件（比如模态框、下拉菜单），直接在entry.esm.js的最顶部引入Bootstrap资源即可，这样能确保用户通过Vue.use()注册组件库时，Bootstrap会被一同加载，所有组件都能获取到所需的样式和功能。

修改后的entry.esm.js示例：

// 引入Bootstrap核心样式
import 'bootstrap/dist/css/bootstrap.min.css';
// 若需使用Bootstrap JS插件（Vue2需提前安装jQuery、Popper.js；Vue3用Bootstrap 5无需jQuery）
import 'bootstrap/dist/js/bootstrap.min.js';

// Import vue components
import * as components from '@/lib-components/index';

// install function executed by Vue.use()
const install = function installZicketVueCheckout(Vue) {
  Object.entries(components).forEach(([componentName, component]) => {
    Vue.component(componentName, component);
  });  
};

// Create module definition for Vue.use()
export default install;

// To allow individual component use, export components
// each can be registered via Vue.component()
export * from '@/lib-components/index';

依赖配置注意事项 #

• 在package.json中，将bootstrap设为dependencies（如果组件库必须依赖它），或者peerDependencies（如果希望用户自行控制Bootstrap版本）。
• Vue2环境下使用Bootstrap 4及以下版本，需额外将jquery、popper.js添加到依赖中；Vue3直接用Bootstrap 5即可，无需这两个依赖。

二、组件库仅使用Bootstrap类名，不强制引入 #

如果你的组件只是用Bootstrap的样式类（比如btn、card），但不想强制用户使用Bootstrap，可以不在组件库中引入Bootstrap，而是在组件库文档中说明：让用户在自己的项目入口（如main.js）自行引入Bootstrap样式和JS，同时在package.json中将bootstrap设为peerDependencies，提示用户需要安装。

为什么选entry.esm.js？ #

这个文件是组件库的ES模块入口，也是Vue插件安装函数的定义处：

• 全局注册组件库时（Vue.use()），这里的资源会被统一加载，避免组件样式缺失。
• 支持按需引入组件时，用户如果单独引入某个组件，也能确保Bootstrap资源被正确加载（若你在entry中全局引入）。

内容的提问来源于stack exchange，提问作者Crazy