VSCode 및 Denon과 함께 Deno에서 가져오기 맵 사용

12417 단어 vscodejavascriptdenoprogramming
게시물에서 Deno에서 JSX를 사용하는 방법에 대해 이야기했습니다.
이제 가져오기 맵을 사용하여 가져오기를 더 쉽게 관리하고 싶습니다.

이 예부터 시작해 보겠습니다.

main.js:

import { serve } from "https://deno.land/[email protected]/http/server.ts";
import  ReactDOMServer from "https://jspm.dev/[email protected]/server";
import home from "./pages/home.jsx"

function render(jsx) {
  return "<!DOCTYPE html>" + ReactDOMServer.renderToString(jsx());
}

const server = serve({ port: 8000 });
const headers = new Headers();
headers.append("Content-Type", "text/html; charset=UTF-8");

for await (const req of server) {
  req.respond({
    status: 200,
    headers: headers,
    body: render(home),
  });
}


페이지/home.jsx:

import React from "https://jspm.dev/[email protected]";
import Layout from "../components/layout.jsx";

export default function () {
  return (
    <Layout title="Hello">
      <h1>Hello world</h1>
    </Layout>
  );
}


구성 요소/layout.jsx:

import React from "https://jspm.dev/[email protected]";

export default function ({ children, title }) {
  return (
    <html>
      <head>
        <title>{title}</title>
      </head>
      <body>{children}</body>
    </html>
  );
}


또한 예제로 tsconfig를 추가했지만 이것이 기본값이기 때문에 여기서는 실제로 필요하지 않습니다.

tsconfig.json:

{
    "compilerOptions": {
        "jsx": "react"
    }
}


이 프로그램은 다음과 같이 시작할 수 있습니다.deno run --allow-net --config=tsconfig.json main.js

데논



매번 긴 명령을 입력하지 않기 위해 Denon을 사용하기 시작했습니다.
설치 지침here을 찾을 수 있습니다.

이렇게 하면 초기 구성을 얻을 수 있습니다.denon --init
내 구성은 다음과 같습니다.

{
  "$schema": "https://deno.land/x/[email protected]/schema.json",
  "scripts": {
    "start": {
      "cmd": "deno run main.js",
      "desc": "start server",
      "tsconfig": "tsconfig.json",
      "importmap": "importmap.json",
      "allow": [
        "net",
      ]
    }
  }
}


지금은 importmap 행을 제거할 수 있습니다.

이제 denon start를 사용하여 시작할 수 있습니다.
또한 파일을 감시하고 필요할 때 다시 시작합니다.

지도 가져오기


importmap.json라는 가져오기 맵 파일을 생성해 보겠습니다.

{
    "imports": {
        "/": "./",
        "react": "https://jspm.dev/[email protected]",
        "reactdom": "https://jspm.dev/[email protected]/server",
        "deno/": "https://deno.land/[email protected]/"
    }
}


줄"/": "./",은 상대 경로 대신 절대 경로를 사용할 수 있음을 의미합니다.
자세한 정보를 찾을 수 있습니다here.

가져오기는 이제 main.js에서 다음과 같이 다시 작성할 수 있습니다.

import { serve } from "deno/http/server.ts";
import  ReactDOMServer from "reactdom";
import home from "/pages/home.jsx"


VSCode



vscode를 사용하고 오류가 발생하는 경우 일부 설정을 추가해야 할 수 있습니다.
먼저 Deno 플러그인이 있고 작업 공간을 초기화했는지 확인하십시오.
명령 팔레트에서 명령Deno: Initialise Workspace Configuration을 사용하여 작업 공간을 초기화할 수 있습니다.

이렇게 하면 파일.vscode/settings.json이 생성됩니다.
importMap 및 config를 추가하여 오류를 수정할 수 있습니다.

{
    "deno.enable": true,
    "deno.lint": true,
    "deno.unstable": false,
    "deno.importMap": "./importmap.json",
    "deno.config": "./tsconfig.json"
}


전체 코드 예제는 Github에서 찾을 수 있습니다.
8. 【Android/Kotlin】웹뷰(WebView)
9. 【Android/Kotlin】동적으로 View 추가

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage