Deno: 你并不总是需要NodeJS

极度狂热

发布于 2022-06-08 18:32:33

8630

发布于 2022-06-08 18:32:33

文章被收录于专栏：极度狂热

回顾Node

包管理复杂

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

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

权限风险

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

require需要处理多种情况

在 Y 目录下 require(X) 时：

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

用一幅图来开涮一下node_modules

处理逻辑采用回调函数

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架构

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

Deno的包管理

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

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

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

// 模块类的引入方法
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";
复制代码

// 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进行逻辑处理

// 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对象

与我们的业务结合

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

// 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启发而做的.

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方式完全不同的模块管理.

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

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} />);
});
复制代码