$ global作为导入的'jquery'模块与Webpack

Question

我安装了@types/jquery软件包，并且与Webpack软件包分开加载了全局jQuery。

这可能会在以后更改，我想在使用jQuery的地方使用import * as $ from 'jquery'。我不希望安装和捆绑真正的jquery包，只需要`@ types / jquery'来为TypeScript提供jQuery类型。

基本上我想要

import * as $ from 'jquery';

要编译成

var $ = window.$;

我试过

  {
    test: require.resolve('jquery'),
    use: 'exports-loader?$=window.$'
  }

但它失败了，因为没有真正的jquery模块：

  

找不到模块：错误：无法解析'... / src'中的'jquery'

如何实现这一目标？

Answer 1

听起来你正在寻找externals Webpack选项：

https://webpack.js.org/configuration/externals/

  

externals配置选项提供了一种从输出包中排除依赖关系的方法。相反，创建的bundle依赖于依赖关系在消费者的环境中出现。

方便地，上面链接中的示例使用jQuery进行演示：

<强> webpack.config.js：

externals: {
    jquery: 'jQuery'
}

应用代码：

import * as $ from 'jquery';

$('.my-element').animate(...);

使用此选项时，您可以安全地安装jquery作为依赖项，而不会在输出包中结束。