如何定制仅含$.ajax()的jQuery 3.4.0构建包兼容旧站点？

你的核心痛点是既要用新版$.ajax()解决跨域问题，又不能破坏原有老旧jQuery代码的运行——定制一个只保留$.ajax()及其必要依赖的jQuery 3.4.0版本，就能完美解决这个矛盾。下面是具体的实现步骤：

1. 获取jQuery 3.4.0源码包 #

先下载jQuery 3.4.0的完整源码（对应GitHub仓库的3.4.0标签版本），解压后找到src文件夹，这里面是jQuery拆分好的模块化源码文件，我们只需要挑选其中和$.ajax()相关的模块。

2. 确定$.ajax()的必要依赖模块 #

$.ajax()不能单独运行，它依赖几个核心基础模块，必须一起打包：

• core.js：jQuery的核心基础，定义了最基础的$对象和核心工具方法
• utils.js：通用工具函数，很多模块都会用到它
• var/document.js、var/window.js：基础环境变量定义，检测文档和窗口对象
• ajax.js：$.ajax()的核心实现逻辑
• ajax/xhr.js：XMLHttpRequest请求的处理层，是跨域请求的关键
• （可选）ajax/jsonp.js：如果你的跨域需求涉及JSONP，就需要加上这个模块

3. 用Grunt构建定制版jQuery #

jQuery官方用Grunt做构建工具，按以下步骤操作：

1. 先安装Node.js和npm，确保环境可用
2. 进入jQuery源码根目录，运行npm install安装所有构建依赖
3. 修改根目录的Gruntfile.js，找到custom任务的modules数组，替换成我们需要的模块列表：

   modules: [
     "core",
     "utils",
     "var/document",
     "var/window",
     "ajax",
     "ajax/xhr"
     // 如果需要JSONP，就添加 "ajax/jsonp"
   ]
   

4. 运行构建命令：grunt custom，完成后会在dist目录生成定制版的jQuery文件（比如jquery.custom.js）

4. 引入定制版并避免变量冲突 #

因为原有站点已经加载了老旧jQuery，引入定制版时必须用noConflict()避免变量覆盖：

<!-- 原有老旧jQuery，保留不动 -->
<script src="old-jquery.js"></script>
<!-- 定制版jQuery 3.4.0 -->
<script src="jquery.custom.js"></script>
<script>
  // 将新版jQuery的$对象重命名为$new，完全隔离旧版
  var $new = jQuery.noConflict(true);
</script>

之后你就可以用$new.ajax()发起跨域请求，原有站点的旧代码（比如用.update()的部分）依然用原来的$对象运行，两者互不干扰。

5. 测试验证 #

最后一定要做两步验证：

• 检查原有站点的所有旧jQuery功能是否正常运行，确保定制版没有破坏旧代码
• 测试$new.ajax()的跨域请求是否解决了之前Ajax.Request的CORS问题

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