$ global 作为使用 Webpack 导入的“jquery”模块

Question

我已经安装了 @types/jquery 包和全局 jQuery，它与 Webpack 包分开加载。

这可能稍后会更改，我想在使用 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 配置选项提供了一种从输出包中排除依赖项的方法。相反，创建的包依赖于消费者环境中存在的依赖关系。

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

webpack.config.js：

externals: {
    jquery: 'jQuery'
}

应用代码：

import * as $ from 'jquery';

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

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