如何通过Webpack使用Jira 9.6 API提供的默认jQuery

问题背景 #

在Jira 9.6环境中，尝试通过Webpack调用官方提供的jQuery前端API时，编译通过但运行时出现$、jQuery变量未定义的错误，尝试多种import语法及requireJs均无效。

解决方案 #

Jira的前端API基于Atlassian的AMD模块系统，且已在全局环境注入了jQuery变量，Webpack需要适配这种外部依赖的使用方式，具体配置如下：

1. 修改Webpack配置文件

在webpack.config.js中添加externals配置和ProvidePlugin插件：

const webpack = require('webpack');

module.exports = {
  // 保留已有entry、output等配置
  externals: {
    // 告知Webpack jQuery是外部全局变量，无需打包到bundle中
    jquery: 'jQuery'
  },
  plugins: [
    // 自动为所有模块注入$和jQuery变量，无需手动导入
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

2. 在业务代码中使用jQuery

配置完成后，无需额外导入语句，直接在代码中使用$或jQuery即可：

// 直接调用Jira内置的jQuery
console.log($.fn.jquery); // 输出Jira提供的jQuery版本（如2.2.4）

若习惯使用import语法，也可以这样写：

import $ from 'jquery';
console.log($.fn.jquery);

无效原因说明 #

• wr-dependency!jira-frontend-api:jquery-2.2.4是Atlassian旧版Web Resource的依赖声明语法，Webpack无法识别这种自定义加载规则，因此无法正确关联Jira的jQuery实例。
• 直接import会让Webpack尝试将jQuery打包进bundle，但Jira提供的jQuery是全局变量，这种方式会导致变量引用冲突或未绑定到正确的全局实例。

注意事项 #

确保你的Webpack打包脚本在Jira的jQuery加载之后执行（可通过Jira插件的资源加载顺序配置实现），避免因全局变量未初始化引发错误。

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