在ASP.NET Core Angular应用中使用Bootstrap指令遇jQuery未定义问题

嘿，我之前在ASP.NET Core Angular项目里也碰到过一模一样的问题——在自定义指令里调用Bootstrap方法时，运行后main-client.js直接抛出jQuery is undefined的错误，折腾了好一会儿才搞定！

问题根源 #

其实这是因为Bootstrap的JS组件依赖全局的jQuery对象，但webpack默认不会把第三方包全局暴露出来，导致你的自定义指令（或是其他依赖Bootstrap的代码）找不到它。

解决方案 #

只需要在webpack.config.js中配置webpack.ProvidePlugin插件，把$和jQuery这两个标识符全局映射到jQuery包，webpack就会自动在需要的地方注入jQuery，不用你手动在每个文件里import啦。

配置代码示例 #

修改你的webpack.config.js文件，添加如下配置：

module.exports = (env) => {
  // 项目原有其他配置代码...
  
  const sharedConfig = {
    // 其他配置项...
    plugins: [
      // 把$和jQuery标识符映射到jquery包，满足Bootstrap的依赖需求
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
      // 项目原有其他插件...
    ]
  };
  
  // 项目原有其他配置代码...
};

这个插件的作用很直白：当代码里用到$或者jQuery的时候，webpack会自动引入jquery包并将其赋值给这些标识符，这样Bootstrap就能找到它需要的全局jQuery对象了。

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