这篇文章是作者的个人2022年Advent Calendar第16天的文章。

由于我实际尝试了操作 Deno 官方文档内容并入门了 Deno，所以这是关于我的备忘录的续篇。
这次我想试试在 Deno 中使用 npm 模块的方法。

学习Deno的基础知识[安装、环境设置、文件执行、标准库]
学习Deno的基础知识[命令行命令、模块、环境变量、Web框架]
学习Deno的基础知识[使用npm模块] <- 现在在这里
学习Deno的基础知识[使用prisma + oak构建API]
学习Deno的基础知识[测试部分]

关于Deno的npm兼容性

Deno最初的时候似乎没有与npm兼容，但是由于像Bun这样比node更快，并且支持npm的运行时出现了，所以现在已经支持了npm。

在Deno的版本(v1.28.2)中，要使用npm，可以通过使用npm specifiers或CDN来实现。

使用npm specifiers来使用npm模块

由于Deno的npm规约仍然不稳定，因此似乎在CDN上使用更加稳定。但是从Deno 1.28开始，对npm的支持似乎变得更加稳定。然而，目前仍然需要在仅依赖于npm规约而无法完全使用npm模块时，使用CDN。

尝试使用Deno和Express

import express from "npm:express@^4.18";
const app = express();

app.get("/", function (_: any, res: any) {
  res.send("Hello World");
});

app.listen(3000);
console.log("listening on http://localhost:3000/");

deno run --allow-read --allow-env --allow-net npm/express.ts
listening on http://localhost:3000/

% curl localhost:3000
Hello World

可以使用以下形式的 npm:<包名>[@版本][/子路径] 来导入和使用。

使用CDN加载npm模块

在中国的本地化中有几个选择，就像UNPKG这样的知名服务，看起来可以选择使用，但也可能考虑使用为Deno设计的Deno友好型CDN可能更好。

例如，可以使用esm.sh作为Deno友好的CDN，使用方式如下所示。

import React from "https://esm.sh/react";

export default class A extends React.Component {
  render() {
    return <div></div>
  }
}

尝试使用Deno来使用React。

我想尝试根据指南使用React，尽管公式文档中已经包含了一些常用的npm模块的使用指南。

创建快速额外的Vite

可以使用create-vite-extra工具在Deno上搭建React应用程序。

可以使用create-vite-extra工具在Deno上快速搭建React应用程序。

deno run --allow-env --allow-read --allow-write npm:create-vite-extra

选择并尝试启动React。

deno task dev

发生了！

尝试添加 react-router-dom 来进行页面跳转。

import { defineConfig } from "npm:vite@^3.1.3";
import react from "npm:@vitejs/plugin-react@^2.1";

import "npm:react@^18.2";
import "npm:react-dom/client@^18.2";
+ import "npm:react-router-dom@^6.4"; // Add this line

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

import React from 'react'
import ReactDOM from 'react-dom/client'
import {
  BrowserRouter as Router,
  Route,
  Routes,
} from "react-router-dom";
import App from './App'
import './index.css'
import Hello from './pages/Hello.jsx';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route exact path="/" element={<App />} />
        <Route exact path="/hello" element={<Hello message="Deno!!" />} />
      </Routes>
    </Router>
  </React.StrictMode>
)

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <img src="/vite-deno.svg" alt="Vite with Deno" />
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
+      <a href="/hello">To Hello Deno!!</a>
    </div>
  )
}

export default App

总结

由於Deno上npm模組的支援仍處於開發階段，所以可能在實際專案中使用會有困難。不過，根據我的使用體驗，它可以正常運作，對於對於前端開發不太熟悉的我來說，可以相當輕鬆地進行開發。由於它支援npm，當需要使用JS相關庫時，我可以選擇在Deno中使用。因此，個人在自己的工作環境中，希望積極地採用Deno，並使用它進行各種實驗！