Deno: 你并不总是需要NodeJS

2022-06-08 18:32:33 浏览数 (1)

回顾Node

包管理复杂

Node包管理很复杂, 包之间又有可能互相依赖, 互相引用. 且存在多个版本安装混乱的问题.

这时候就又需要借助yarn.lock之类的工具进行管理. 并且根据yarn官方文档说明, yarn会忽略依赖包内的yarn.lock, 仅支持top-level的yarn.lock . 所以可能会导致你的node_modules里面充斥着各种版本, 各种重复的包.

权限风险

由于引用的包都已经安装至node_modules, 并且node运行时无法进行任何的权限控制. 导致有可能第三方包在运行的时候, 会有隐私风险. 比如你只是想读取本地的文件, 可是它一边扫描你运行的文件, 一边通过网络请求将你本地的数据抓取上传, 或者修改删除.

require需要处理多种情况

在 Y 目录下 require(X) 时：

  1. 如果 X 是内置模块，加载该模块；
  2. 如果 X 以 / 开头，设置 Y 为文件系统的根部 (root)；
  3. 当 X 以 ./ , / , ../ 开头时，加载该文件或者加载该目录；
  4. 否则加载 node_modules 目录下的模块： LOAD_NODE_MODULES(X, dirname(Y))

用一幅图来开涮一下node_modules

处理逻辑采用回调函数

代码语言：javascript复制
const fs = require('fs');
fs.readFile('README.md', (err, data) => {
    if (err) { // error handling }
    else { // data handling }
});
复制代码

总结

  • 不修改npm源的情况下, 为中心化组件库
  • 使用回调进行逻辑处理
  • 无法控制第三方库进行的读取, 网络权限
  • require处理复杂
  • 无法直接运行typescript
  • Version>13.2.0后, 支持ES modules, 之前使用CommonJS

背景介绍

Deno是一个可以运行JavaScript, Typescript的执行环境. 前者能力由V8引擎提供, 后者由Rust语言创造.

因为Rust支持WebAssembly, 所以可以直接使用wasm库和代码

Deno架构

  1. Deno使用Rust启动
  2. 因为V8由C 编写, 所以通过Rust去执行C 代码来初始化V8对象. 这一部分使用Rust FFI调用rusty_v8执行
  3. 这样Deno就可以执行JavaScript代码了
  4. 运行ts的时候, 会通过内置的tsc和swc进行预编译, 并且提供一份缓存.
  5. Tokio提供事件处理

Deno的包管理

提供三种方式引入资源文件

代码语言：javascript复制
// 从 URL 导入
import XXXX from "https://cdn.bootcdn.net/abc.js";
// 从相对路径导入
import * as Service from "./service.js";
// 从绝对路径导入
import X from "/index.js";
复制代码

在Node当中的一些引用语法, 在Deno当中并不得到支持

代码语言：javascript复制
// 模块类的引入方法
import x from "x";
// 不标明根目录的路径
~~import x from "x/index.js";~~  // 通过[import maps](https://deno.land/manual/linking_to_external_code/import_maps)可以解决这样的引用
~~~~// 没有标明文件后缀
import index from "./index";
复制代码
代码语言：javascript复制
// import maps来解决相对路径引用问题
{
  "imports": {
    "fmt/": "https://deno.land/std@0.141.0/fmt/"
  }
}

import { red } from "fmt/colors.ts";

console.log(red("hello world"));

deno run --import-map=import_map.json color.ts
复制代码

Deno的权限控制

  • -allow-env= 允许环境访问，例如读取和设置环境变量。
  • -allow-hrtime 允许高精度时间，高精度时间能够在计时攻击和特征识别中使用。
  • -allow-net= 允许网络访问。您可以指定一系列用逗号分隔的域名，来提供域名白名单。
  • -allow-ffi 允许加载动态的依赖, 注意, 也不在沙箱中运行. 谨慎使用, 并且该API并不稳定.
  • -allow-read= 允许读取文件系统。您可以指定一系列用逗号分隔的目录或文件，来提供文件系统白名单。
  • -allow-run= 允许运行子进程。请注意，子进程不在沙箱中运行，因此没有与 deno 进程相同的安全限制，请谨慎使用。
  • -allow-write= 允许写入文件系统。您可以指定一系列用逗号分隔的目录或文件，来提供文件系统白名单。
  • A, --allow-all 允许所有权限，这将禁用所有安全限制

Deno支持Promise进行逻辑处理

代码语言：javascript复制
// read-file.ts - Deno
try {
    const data = await Deno.readFile('README.md');
    // Handle the data
} catch (e) {
    // Handle the error
}
复制代码

从上述代码可以看到. Deno支持 top-level await, 意味着你可以不依赖async function直接使用await语法.

内置命令

  • bundle Bundle module and dependencies into single file
  • cache Cache the dependencies
  • compile UNSTABLE: Compile the script into a self contained executable
  • completions Generate shell completions
  • coverage Print coverage reports
  • doc Show documentation for a module
  • eval Eval script
  • fmt Format source files
  • help Prints this message or the help of the given subcommand(s)
  • info Show info about cache or info related to source file
  • install Install script as an executable
  • lint Lint source files
  • lsp Start the language server
  • repl Read Eval Print Loop
  • run Run a JavaScript or TypeScript program
  • test Run tests
  • types Print runtime TypeScript declarations
  • uninstall Uninstall a script previously installed with deno install
  • upgrade Upgrade deno executable to given version

总结

  • 不断扩充的组件库
  • 原生支持promise进行逻辑处理
  • 原生支持typescript
  • 原生支持ES modules
  • 允许进行文件系统, 网络访问等权限控制, 用来执行沙盒代码
  • 可编译为一个可执行文件
  • 兼容浏览器API, 比如支持window对象

与我们的业务结合

代码语言：javascript复制
import {
  emptyDir,
  emptyDirSync,
  ensureDirSync,
  ensureFileSync,
} from "https://deno.land/std@0.132.0/fs/mod.ts";

if(!Deno?.args?.[0]) {
  console.error("请输入TED文件目录");
  Deno.exit(1);
}

const tedPath = Deno.args[0]

for await(const f of Deno.readDir(tedPath)) {
  if(f.isFile) continue;
  if(f.name.includes("product-frontend-imgcache")) {
      for await(const y of Deno.readDir(`${tedPath}/${f.name}`)) {
          if(y.isFile) continue;
          if(y.name.includes("module-frontend")){
              ensureFileSync(`${tedPath}/${f.name}/${y.name}/TCE/sync.sh`);
              const text = await Deno.readTextFile("./sync.sh");
              const s = await Deno.writeTextFile(`${tedPath}/${f.name}/${y.name}/TCE/sync.sh`, text);
          }
      }
  }
}
复制代码

deno run --allow-read --allow-write test.ts /path

我们使用了typescript脚本, 进行了ted项目的批量修改.

一些疑问

组件库支持情况?

支持主流库, 如lodash, i18next, billboardjs等, 官方也提供了安装地址, deno.land/x

如果贡献, 使用第三方库?

自行开发第三方组件很简单, 只需要上传到托管js的服务器, 或者直接放在github即可. 也可以在官方发布组件.

能否使用node_modues?

不能直接使用node_modules, 但是有一些组件库做了层级适配, 可以间接使用

既然都在使用远程依赖的文件, 如果文件被篡改怎么办? 是否安全?

官方给的解决方案是, 使用cache的lock功能, 将文件锁定deno cache --lock=lock.json --lock-write src/deps.ts

实现一个简单HTTP web server

代码语言：javascript复制
// handler.ts
export function handler(req: Request): Response {
  return new Response("Hello, World!");
}

// entry.ts

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

serve(handler, { port: 4242 });
复制代码

deno run --allow-net ./entry.ts

Web框架介绍

在deno中也有对应的web框架, 叫做oak. 使用方法基本上和KOA是一致的, 官网文档也说明了, 是受到KOA启发而做的.

代码语言：javascript复制
import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

// Logger
app.use(async (ctx, next) => {
  await next();
  const rt = ctx.response.headers.get("X-Response-Time");
  console.log(`${ctx.request.method} ${ctx.request.url} - ${rt}`);
});

// Timing
app.use(async (ctx, next) => {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  ctx.response.headers.set("X-Response-Time", `${ms}ms`);
});

// Hello World!
app.use((ctx) => {
  ctx.response.body = "Hello World!";
});

await app.listen({ port: 8000 });
复制代码

进行react渲染

Deno默认支持jsx, tsx的语法, 使用它就可以创建一个基于Deno的react app了.

它采用了和npm方式完全不同的模块管理.

可以从它的模板依赖代码看到, 它完全采用的是远程的代码.

代码语言：javascript复制
import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
import { h, ssr, tw } from "https://crux.land/nanossr@0.0.1";

const Hello = (props) => (
  <div class={tw`bg-white flex h-screen`}>
    <h1 class={tw`text-5xl text-gray-600 m-auto mt-20`}>
      Hello {props.name}!
    </h1>
  </div>
);

await serve((req) => {
  const url = new URL(req.url);
  const name = url.searchParams.get("name") ?? "world";
  return ssr(() => <Hello name={name} />);
});
复制代码

总结

受限文章长度, deno的事件处理, 在rust当中也可以作为独立的应用使用, 以及如何和wasm结合使用都没有展开来说.

简单来说, deno是一个轻量, 自由的库. 我总结的适用场景可以是, 1. 脚本文件, 2. 做一个 data mock server, 3. 前端的监控或者是自动化测试脚本编写工具.

当然作为一个还在不断发展的库, deno还有更多的可能性, 我这里只是总结了几种场景.

编程算法 rust javascript 缓存 typescript

0 人点赞