justjavac/deno_cheerio

How to use cheerio in Deno

deno_cheerio

记录一次在 Deno 中使用 cheerio 库的过程。

如何在 Deno 中使用 cheerio。

cheerio 是一个非常流行的 npm 包，为服务器特别定制的，快速、灵活、实施的 jQuery 核心实现。可以说 cheerio 就是一个 Node.js 版的 jQuery。

那么我们在 Deno 中如何使用这个库呢？

使用

如果直接在 Deno 中使用源码，像这样：

import * as Cheerio from "https://raw.githubusercontent.com/cheeriojs/cheerio/v1.0.0/lib/cheerio.js";

会报错：

error: Uncaught ReferenceError: require is not defined
var parse = require('./parse'),
            ^
    at https://raw.githubusercontent.com/cheeriojs/cheerio/v1.0.0/lib/cheerio.js:6:13

因为 Deno 并不支持 commonjs 规范，只支持 esm。

因此我们必需借助 jspm.io（或其他类似服务）来将 commonjs 转换为兼容的 esm 格式。

我们可以这样：

import cheerio from "https://dev.jspm.io/npm:cheerio/index.js";

const $ = cheerio.load('<h2 class="title">Hello world</h2>');

$("h2.title").text("Hello Deno!");
$("h2").addClass("deno");

console.log($.html());

我们试着运行一下：

deno run mod.ts

成功输出了 <h2 class="title deno">Hello Deno!</h2>。

添加 TypeScript 支持

好在 @types 仓库提供了 cheerio 的类型定义文件，我们在 mod.ts 顶部增加一行：

+// @deno-types="https://dev.jspm.io/@types/cheerio/index.d.ts"
 import cheerio from "https://dev.jspm.io/cheerio/index.js";

运行一下，又报错了

error: relative import path "node" not prefixed with / or ./ or ../ Imported 
from "https://dev.jspm.io/npm:@types/[email protected]/index.d.ts"

看来这个 d.ts 文件和 deno 不兼容，把这个文件下载到本地，新建 cheerio.d.ts 改造一下。

问题出在第 14 行，/// <reference types="node" /> 与 Deno 不兼容，于是删掉这一行：

-/// <reference types="node" />
-

再次运行，又报错：

error: TS2580 [ERROR]: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.
  load(html: string | Buffer, options?: CheerioOptionsInterface): CheerioStatic;
                      ~~~~~~
    at https://cdn.jsdelivr.net/gh/justjavac/deno_cheerio/cheerio.d.ts:310:23

Buffer 是 nodejs 的类型，所以报错了。

其实 Deno 也有 Buffer，我们需要使用 Deno.Buffer 来引用，考虑到 Deno 的 Buffer 和 Node.js 的并不兼容，于是直接删掉这个类型。

(补充 2021-04-19，Deno 1.9 已经放弃了 Deno.Buffer，在 2.0 会将其移除)

-  load(html: string | Buffer, options?: CheerioOptionsInterface): CheerioStatic;
+  load(html: string, options?: CheerioOptionsInterface): CheerioStatic;

再次运行，终于得到了我们想要的结果：

<h2 class="title deno">Hello Deno!</h2>

例子

deno run https://cdn.jsdelivr.net/gh/justjavac/deno_cheerio/mod.ts

License

deno_cheerio is released under the MIT License. See the bundled LICENSE file for details.

deno_cheerio's Issues

Why create a separate project instead of forking/patching cheerio's repo?

Thanks for making so I can use Cheerio with Deno!

I'm interested in getting the mainline Cheerio to work with Deno out-of-the-box. Is there a reason this was done as a separate deno_cheerio project and not forked from the main Cheerio project?

https://dev.jspm.io/cheerio/index.js not working

Currently the url https://dev.jspm.io/cheerio/index.js is showing the error - "Internal error on package lookup.". Is there any alternate method to run this? Thanks in advance

我尝试的时候类型报错

我的权宜之计

How to access CheerioElement, CheerioStatic, etc.?

This is a great library @justjavac! Thanks for putting it together.

I've been using deno_cheerio successfully for many months now but recently something changed and I'm not able to access CheerioElement, CheerioStatic, and similar.

For example, until last week this worked:

// @deno-types="https://cdn.jsdelivr.net/gh/justjavac/deno_cheerio/cheerio.d.ts"
import cheerio from "https://dev.jspm.io/cheerio/index.js";

export interface HtmlImage {
  readonly src?: string;
  readonly alt?: string;
  readonly width?: number | string;
  readonly height?: number | string;
  readonly imageElem: CheerioElement;
}

Now, however, after the latest update I'm seeing this problem:

TS2304 [ERROR]: Cannot find name 'CheerioElement'.
    elem: CheerioElement,
          ~~~~~~~~~~~~~~

Any ideas on how I can fix that issue?
I just tried the following, too:

  readonly imageElem: cheerio.CheerioElement;

But that did not work either, I get this error:

error: TS2503 [ERROR]: Cannot find namespace 'cheerio'.
  readonly imageElem: cheerio.CheerioElement;
                      ~~~~~~~

Any help would be appreciated.
Thanks again for the great work!