如何通过 CDN 把 Harper 直接引入网页而不用构建工具【免费下载链接】harperOffline, privacy-first grammar checker. Fast, open-source, Rust-powered项目地址: https://gitcode.com/GitHub_Trending/har/harper如果你想在一个普通 HTML 页面里加入语法检查又不想引入 npm 安装、打包器或构建步骤可以用 Harper 的 JavaScript 封装harper.js配合 unpkg CDN 完成。前提是你的浏览器支持原生 ECMAScript 模块语法——官方文档说明这一点“supported by all modern browsers”所有现代浏览器均支持。完成后用户在页面输入框里打字时Harper 会在浏览器本地对文本做 lint 并列出问题整个过程不需要服务器端运行 Harper。为什么用WorkerLinter而不是LocalLinterharper.js的Linter接口有两种实现LocalLinter和WorkerLinter。官方文档在 linting 说明 中明确区分了二者LocalLinter会在同一个事件循环里异步实例化并准备 Harper 的 WebAssembly 模块可能导致较高的 LCP文档的结论是 “LocalLinters are not for the web”。WorkerLinter在 Web Worker 内实例化模块不会阻塞事件循环文档推荐用于交互式 Web 应用。因此走 CDN 的纯网页场景应选WorkerLinter。完整示例页面仓库自带一个可以直接照抄的原始 HTML 示例raw-web/index.html。该示例通过script typemodule用原生 ESM 语法从 unpkg 导入两个模块binaryInlined内联的 Harper WebAssembly 二进制WorkerLinterlinter 实现。!doctype html html langen head meta charsetutf-8 / script typemodule // We can import harper.js using native ECMAScript syntax. import { binaryInlined } from https://unpkg.com/harper.js2.4.0/dist/binaryInlined.js; import { WorkerLinter } from https://unpkg.com/harper.js2.4.0/dist/index.js; // Since we are working in the browser, we can use either WorkerLinter, which doesnt block the event loop, or LocalLinter, which does. const linter new WorkerLinter({ binary: binaryInlined }); // Every time the textarea/ received an input, we process it and update our list. async function onInput(e) { const lints await linter.lint(e.target.value); const list document.getElementById(errorlist); // Clear previous results list.innerHTML ; for (const lint of lints) { const item document.createElement(LI); const text document.createTextNode(lint.message()); item.appendChild(text); list.appendChild(item); } } const inputField document.getElementById(maininput); inputField.addEventListener(input, onInput); onInput({ target: inputField }); /script !--Make the page look good using SimpleCSS-- link relstylesheet hrefhttps://cdn.simplecss.org/simple.min.css / /head body h1Demo/h1 p This page is a simple example of using codeharper.js/code on a plain HTML page with a CDN. It isnt pretty, but it demonstrates the fundamentals of using Harper. Start typing in the text box below to start getting suggestions right in your browser. /p !--This is an intentional mistake to highlight the technology.-- textarea idmaininputThis is an test/textarea h2Errors/h2 ul iderrorlist Loading... /ul /body /html导入 URL 中的版本号harper.js2.4.0是仓库示例中固定下来的版本。仓库当前 harper.js/package.json 声明的版本是2.10.0如需使用更新版本只需替换两个 URL 中的2.4.0。示例中link relstylesheet引入的 SimpleCSS 只用于排版与 Harper 功能无关可按需删掉。验证结果示例本身内置了验证路径textarea idmaininput的初始值是故意写错的句子This is an test。页面加载后会立即触发一次onInput随后#errorlist里的占位文本Loading...会被清空并替换为 Harper 返回的 lint 条目每条显示lint.message()的内容。之后每次在文本框中键入列表都会重新计算并刷新。看到错误列表从Loading...变成具体条目就说明 CDN 导入和 Web Worker 初始化都成功了。仓库文档站也有同一个示例页的在线版本由 CDN/example/server.ts 直接返回上面的 HTML 源码可用于对照效果。本地打开示例的注意事项raw-web/README 提到示例可以通过microserver一个 crates.io 上的 Rust 工具启动本地服务器来打开。这是一个可选分支如果你不想额外安装这个工具也可以把index.html复制进任何静态文件目录中自行托管或直接在支持file://加载模块的浏览器里尝试。限制harper.js目前处于 early access 阶段官方 introduction 文档 明确说明 API 尚未稳定后续可能变化。CDN 方式依赖从 unpkg 拉取脚本页面运行时需要网络可达Harper 的 lint 计算本身完全在浏览器设备端执行不经过 Harper 的服务器。文档入口在 CDN 说明页其中内嵌的就是上文这个 raw-web 示例需要 Node.js 用法LocalLinter时可另行查看 node 说明但那属于另一种集成路径与本文的 CDN 网页场景不冲突也不混用。【免费下载链接】harperOffline, privacy-first grammar checker. Fast, open-source, Rust-powered项目地址: https://gitcode.com/GitHub_Trending/har/harper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何通过 CDN 把 Harper 直接引入网页而不用构建工具？
如何通过 CDN 把 Harper 直接引入网页而不用构建工具【免费下载链接】harperOffline, privacy-first grammar checker. Fast, open-source, Rust-powered项目地址: https://gitcode.com/GitHub_Trending/har/harper如果你想在一个普通 HTML 页面里加入语法检查又不想引入 npm 安装、打包器或构建步骤可以用 Harper 的 JavaScript 封装harper.js配合 unpkg CDN 完成。前提是你的浏览器支持原生 ECMAScript 模块语法——官方文档说明这一点“supported by all modern browsers”所有现代浏览器均支持。完成后用户在页面输入框里打字时Harper 会在浏览器本地对文本做 lint 并列出问题整个过程不需要服务器端运行 Harper。为什么用WorkerLinter而不是LocalLinterharper.js的Linter接口有两种实现LocalLinter和WorkerLinter。官方文档在 linting 说明 中明确区分了二者LocalLinter会在同一个事件循环里异步实例化并准备 Harper 的 WebAssembly 模块可能导致较高的 LCP文档的结论是 “LocalLinters are not for the web”。WorkerLinter在 Web Worker 内实例化模块不会阻塞事件循环文档推荐用于交互式 Web 应用。因此走 CDN 的纯网页场景应选WorkerLinter。完整示例页面仓库自带一个可以直接照抄的原始 HTML 示例raw-web/index.html。该示例通过script typemodule用原生 ESM 语法从 unpkg 导入两个模块binaryInlined内联的 Harper WebAssembly 二进制WorkerLinterlinter 实现。!doctype html html langen head meta charsetutf-8 / script typemodule // We can import harper.js using native ECMAScript syntax. import { binaryInlined } from https://unpkg.com/harper.js2.4.0/dist/binaryInlined.js; import { WorkerLinter } from https://unpkg.com/harper.js2.4.0/dist/index.js; // Since we are working in the browser, we can use either WorkerLinter, which doesnt block the event loop, or LocalLinter, which does. const linter new WorkerLinter({ binary: binaryInlined }); // Every time the textarea/ received an input, we process it and update our list. async function onInput(e) { const lints await linter.lint(e.target.value); const list document.getElementById(errorlist); // Clear previous results list.innerHTML ; for (const lint of lints) { const item document.createElement(LI); const text document.createTextNode(lint.message()); item.appendChild(text); list.appendChild(item); } } const inputField document.getElementById(maininput); inputField.addEventListener(input, onInput); onInput({ target: inputField }); /script !--Make the page look good using SimpleCSS-- link relstylesheet hrefhttps://cdn.simplecss.org/simple.min.css / /head body h1Demo/h1 p This page is a simple example of using codeharper.js/code on a plain HTML page with a CDN. It isnt pretty, but it demonstrates the fundamentals of using Harper. Start typing in the text box below to start getting suggestions right in your browser. /p !--This is an intentional mistake to highlight the technology.-- textarea idmaininputThis is an test/textarea h2Errors/h2 ul iderrorlist Loading... /ul /body /html导入 URL 中的版本号harper.js2.4.0是仓库示例中固定下来的版本。仓库当前 harper.js/package.json 声明的版本是2.10.0如需使用更新版本只需替换两个 URL 中的2.4.0。示例中link relstylesheet引入的 SimpleCSS 只用于排版与 Harper 功能无关可按需删掉。验证结果示例本身内置了验证路径textarea idmaininput的初始值是故意写错的句子This is an test。页面加载后会立即触发一次onInput随后#errorlist里的占位文本Loading...会被清空并替换为 Harper 返回的 lint 条目每条显示lint.message()的内容。之后每次在文本框中键入列表都会重新计算并刷新。看到错误列表从Loading...变成具体条目就说明 CDN 导入和 Web Worker 初始化都成功了。仓库文档站也有同一个示例页的在线版本由 CDN/example/server.ts 直接返回上面的 HTML 源码可用于对照效果。本地打开示例的注意事项raw-web/README 提到示例可以通过microserver一个 crates.io 上的 Rust 工具启动本地服务器来打开。这是一个可选分支如果你不想额外安装这个工具也可以把index.html复制进任何静态文件目录中自行托管或直接在支持file://加载模块的浏览器里尝试。限制harper.js目前处于 early access 阶段官方 introduction 文档 明确说明 API 尚未稳定后续可能变化。CDN 方式依赖从 unpkg 拉取脚本页面运行时需要网络可达Harper 的 lint 计算本身完全在浏览器设备端执行不经过 Harper 的服务器。文档入口在 CDN 说明页其中内嵌的就是上文这个 raw-web 示例需要 Node.js 用法LocalLinter时可另行查看 node 说明但那属于另一种集成路径与本文的 CDN 网页场景不冲突也不混用。【免费下载链接】harperOffline, privacy-first grammar checker. Fast, open-source, Rust-powered项目地址: https://gitcode.com/GitHub_Trending/har/harper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考