关于前端:在Deno中使用-Node-模块

只管办法不是很好，但有时别无选择。

Deno 是基于 Web 技术的服务器端代码执行环境。

• Node 应用 JavaScript 与 commonjs 模块，并把 npm/yarn 作为其包管理器。
• Deno 应用 Typescript 或 JavaScript，以及古代的 javascript 导入语句。它不须要包管理器。

想要导入 deno 中的模块，应该通过 URL 援用：

import {serve} from "https://deno.land/std/http/server.ts";

你能够在 Deno 规范库 或 Deno 第三方模块列表中找到更多须要的模块，然而它们并不能满足你所须要的所有。有时只能应用依赖 npm 生态所提供的模块。上面是从最不便到最繁琐的一些办法：

1. 如果模块应用了 ES 模块的 import/export 语法。

你在 deno 中所应用的库不肯定要来自举荐的 Deno 包，它们能够来自任何 URL，只有它们用了 import 语法即可。通过 unpkg 间接从 npm 存储库外部拜访这些文件不失为一个好办法。

import throttle from https://unpkg.com/lodash@4.17.19/throttle.js

2. 如果模块自身没有应用 imports，但源代码用到了

如果是通过 npm 编译的模块，或应用了谬误格局的模块，那么是否应用其源代码可能须要一些运气。许多风行库的源代码曾经从 commonjs 迁徙到了符合标准的 ES 模块的 import 语法。

一些软件包有独自的 src/ 和 dist/ 目录，其中 ES 模块格调的代码位于 src/ 中，但 npm 中并未将其蕴含在软件包中。在这种状况下，你能够间接从源进行导入。

import throttle from "https://raw.githubusercontent.com/lodash/lodash/master/throttle.js";

能够通过单击 github 上的“raw”按钮失去这个 URL，进而获取原始的 JS 文件。应用 github cdn 或查看文件是否能够通过 github 页面进行拜访，这样更间接，但却是可行的。

特地留神： 一些库将 ES 模块与 webpack 一起应用，或者应用模块加载器，使它们能够从 Node 模块中导入，如下所示：

// 不好的用法:
import {someFunction} from "modulename";
import {someOtherFunction} from "modulename/file.js";

规范的导入办法是，要以 ./ 结尾或者是一个能够失常工作的 URL：

// 规范的用法:
import {someOtherFunction} from "./folder/file.js";

不过你也能够尝试下一种办法：

3. 导入 commonjs 模块

侥幸的是，有一个名为 JSPM 的服务，它可能解析第三方模块并对 commonjs 模块进行编译来用作 ES 模块导入。该工具可用于在浏览器中应用 Node 模块，而无需构建步骤。然而咱们也能够在这里用到它。

在我最近的我的项目中，想进行推送告诉，其中波及生成 VAPID 的凭据，有一个能够加密的 deno 明码库，然而整个开发过程很艰难，我宁愿应用风行的 web-push 库。能够用 JSPM CDN 和如下 URL 进行导入：

import webPush from "https://dev.jspm.io/web-push";

这样能够在 deno 中向像应用其余任何模块一样去应用它。

使 Typescript 类型可能失常工作

在 deno 中应用 typecipt 有一个不错的性能，就是很容易可能为模块提供了十分完满的主动补全性能。如果编辑器的 deno 扩大晓得类型定义，它甚至能够主动补全第三方模块。

只管这对代码是否可能失常工作不是必要的，然而能够帮你很好的保护代码。

在我导入另一个名为 fast-xml-parser 的模块时，我留神到它有一个类型定义文件是以 .d.ts 结尾的。这些文件形容了各种接口，甚至实用于 JavaScript.js 文件。有时你还能够在 @types\somemodule 存储库中找到类型定义文件。

例如：https://github.com/Definitely…

通过这个文件 typescript 能够主动实现从 JavaScript 文件导入的内容。即便对于用 JSPM 导入的文件也是如此：

// 导入 fast-xml-parser 库
import fastXMLParser from "https://dev.jspm.io/fast-xml-parser";
// 从 fast-xml-parser 的源代码导入类型定义文件
import * as FastXMLParser from "https://raw.githubusercontent.com/NaturalIntelligence/fast-xml-parser/master/src/parser.d.ts";
// 将 parser 与以下类型一起应用
const parser = fastXMLParser as typeof FastXMLParser;

我从定义文件中将类型定义导入为 FastXMLParser（请留神是大写的 F），它不蕴含任何无效代码，但这是一个与咱们要导入的代码具备雷同类型的对象。

我从 JSPM 中将代码导入为 fastXMLParser（小写字母 f），这是无效的代码，但没有类型。

接下来，把它们组合在一起来创立 parser，即 FastXMLParser 类型的 fastXMLParser。

最初心愿你能尝试一下 deno。Deno 可能应用任何一种用于 Web 甚至是用于 node/npm 的模块，的确为这个新的服务器端库生态奠定了良好的根底。????

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

• 深刻了解 Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13 个帮你进步开发效率的古代 CSS 框架
• 疾速上手 BootstrapVue
• JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
• WebSocket 实战：在 Node 和 React 之间进行实时通信
• 对于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30 分钟用 Node.js 构建一个 API 服务器
• Javascript 的对象拷贝
• 程序员 30 岁前月薪达不到 30K，该何去何从
• 14 个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩大插件
• Node.js 多线程齐全指南
• 把 HTML 转成 PDF 的 4 个计划及实现

• 更多文章 …