Angular5+Electron+Webpack3项目中如何引入Bootstrap等依赖库？

我帮你整理了一套完整的适配方案，能在你已经执行eject后的项目里顺利引入这些依赖：

1. 安装必要依赖 #

先通过npm安装核心依赖和TypeScript类型声明（Angular基于TS，类型声明能避免编译阶段的类型报错）：

# 安装生产环境依赖
npm install bootstrap jquery popper.js --save

# 安装开发环境的TypeScript类型声明
npm install @types/jquery @types/popper.js --save-dev

2. 修改Webpack配置文件（webpack.config.js） #

结合你已有的entryPoints和样式配置，需要补充两处关键设置：

2.1 给scripts入口添加依赖加载顺序 #

找到配置中的entry模块，把jQuery、Popper.js和Bootstrap JS按顺序加入scripts入口数组（确保依赖加载顺序正确，Bootstrap JS需要依赖前两者）：

entry: {
  // ... 保留你原有的其他入口配置
  scripts: [
    'jquery',
    'popper.js',
    'bootstrap/dist/js/bootstrap.min.js',
    // 你原来的自定义scripts文件路径
  ]
}

2.2 配置ProvidePlugin暴露全局变量 #

Bootstrap的JS需要全局可访问的$、jQuery和Popper对象，所以在webpack的plugins数组中添加如下配置：

const webpack = require('webpack'); // 确保文件顶部已引入webpack模块

module.exports = {
  // ... 保留你原有的其他配置
  plugins: [
    // ... 保留你已有的其他插件
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default'] // Popper.js需要导出default对象
    })
  ]
};

3. 优化样式路径（可选） #

你已经在styles数组中配置了Bootstrap的CSS，建议把路径换成跨平台更友好的正斜杠写法（webpack兼容两种路径格式）：

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "./src/..." // 保留你原有的自定义样式文件路径
]

4. 验证依赖是否生效 #

启动项目后，通过两种方式验证：

• 在任意Angular组件的ngOnInit中测试jQuery：

ngOnInit() {
  console.log($('body')); // 能正常打印DOM元素说明jQuery已全局可用
}

• 测试Bootstrap交互组件，比如添加一个下拉菜单按钮，点击后能正常展开，说明Bootstrap JS和Popper.js已生效。

这样配置后，你的项目就能完整使用Bootstrap的所有功能，同时完美适配Electron和Webpack的环境啦！

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