大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 jquery-to-js

Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.

很多时候开发者可能想从日常项目中删除 jQuery 依赖，因为大多数项目只使用 15% ~ 20% 的 jquery 方法，而且在大多数情况下甚至不想支持所有边缘情况或旧版浏览器。

要实现该目的困难之处是在现有项目中找到 jQuery 方法，并编写替代的普通 js 方法，且不需要对代码库进行太多更改。

而 jquery-to-js 库可以让开发者轻松从特定 JavaScript 文件中查找 jquery 方法并生成可读的、可链接的 Vanilla JS 替代方案。 而且如果想生成类似于 jQuery 的工具方法也很有用。

目前 jquery-to-js 在 Github 通过 MIT 协议开源，有超过 2k 的 star，是一个值得关注的前端开源项目。

如何使用 jquery-to-js

首先需要安装相应的转换器依赖：

npm install -g jquery-to-js

然后可以通过相应的 CLI 工具快速完成转换：

jquery-to-js src/sample.js out.js// 从 example.js 查找 jQuery 方法并在 out.js 中输出 vanillaJsjquery-to-js "src/*.js" out.js// 从所有匹配文件中查找 jQuery 方法并在 out.js 中编写 vanillaJs 替代方案jquery-to-js --methods "addClass, removeClass, attr" -o utils.js// 为指定的 jQuery 方法构建 vanillaJs 替代方案

需要注意的是，jquery-to-js 生成的工具函数并不完全等同于所有场景中的 jQuery 方法，可以自行验证。

从输出代码层面看，假如有以下 jQuery 代码:

$(".vue").siblings().addClass("highlight");

通过转换器生成的输出如下所示，其支持类似于 jQuery 的可链接方法。可以将 �����别名重命名为utils别名重命名为 以更类似于 jQuery 语法，并用提供的代码替换 jQuery 库。

// 生成的代码export class Utils {  constructor(selector) {    this.elements = Utils.getSelector(selector);    this.element = this.get(0);    return this;  }  static getSelector(selector, context = document) {    if (typeof selector !== 'string') {      return selector;    }    if (isId(selector)) {      return document.getElementById(selector.substring(1))    }    return context.querySelectorAll(selector);  }  each(func) {    if (!this.elements) {      return this;    }    if (this.elements.length !== undefined) {      [].forEach.call(this.elements, func);    } else {      func(this.element, 0);    }    return this;  }  siblings() {    if (!this.element) {      return this;    }    const elements = [].filter.call(      this.element.parentNode.children,      (child) => child !== this.element    );    return new Utils(elements);  }  get(index) {    if (index !== undefined) {      return this.elements[index];    }    return this.elements;  }  addClass(classNames = '') {    this.each((el) => {      // IE doesn't support multiple arguments      classNames.split(' ').forEach((className) => {        el.classList.add(className);      });    });    return this;  }}export default function $utils(selector) {  return new Utils(selector);}

更新 jQuery 的代码示例如下：

$utils(".vue").siblings().addClass("highlight");

更多关于 jquery-to-js 的用法和参考资料可以阅读文末资料，本文不再过多展开。

参考资料

https://www.lightgalleryjs.com/jquery-to-js-converter/

https://github.com/sachinchoolur/jquery-to-javascript-converter

https://www.youtube.com/watch?v=shEe4Ml6D9Q