Deno1.17의 JSON을 가져오려고 합니다.

Deno1.17번 드디어 JSON을 데려왔습니다!!
원래 디노는 버전 0의 시대에 JSON 도입#1065을 실현했다.당시의 문장 구조는 매우 간단했다import json from "./foo.json".
그러나 JSON이 ECMAScript 규격에 들어갈 때assert { type: "json" }의 문법(Import Assiertions)에 대응해야 하기 때문에 버전 1.0.0이 발표될 때 JSON 가져오기가 삭제#5037되었다.
며칠 전 Type Script 45이(가) 릴리즈되면 Import Assiertions에 대한 대응이 모두 완료되므로 Deno에서 JSON 가져오기를 다시 가져옵니다.(swc와 v8 등이 대응하고 TS가 마지막 블로킹이다.)
JSON 가져오기
JSON의 도입은 12월 16일에 발매된 Deno1이다.17에서 도입됐지만 달력을 덧붙인 담당일의 의미로는 이미 늦었으니 카나리 버전으로 해보자.
※ 캐너리 버전도 발매가 늦어져 (일본시간 12/16 오전 4시) 기고가 늦어졌습니다.미안합니다.
canary 버전으로 업데이트

> deno upgrade --canary

위에서 설명한 대로 JSON 가져오기는 Import Assiertions와 함께 사용됩니다.
test.json

{ "Hello": "World" }

JSON 가져오기

import data from "./test.json" assert { type: "json" };
console.log(data); //=> { Hello: "World" }

그나저나 형 추론도 효과가 있다.

import을 여러 번 했을 때의 행동
한 JSON 파일을 여러 번 import할 때 ===로 비교하면 진짜다.

import data1 from "./test.json" assert { type: "json" };
import data2 from "./test.json" assert { type: "json" };
console.log(data1 === data2); //=> true

속성을 다시 쓸 때의 행동
위에서 실험한 바와 같이 여러 번 import의 참조는 같을 것이다.
만약 import의 모듈의 일부분을 다시 썼다면 다른 곳에서 import의 모듈을 바꾸어 보십시오.

import data1 from "./test.json" assert { type: "json" };
import data2 from "./test.json" assert { type: "json" };

data1.Hello = "Konnichiwa";
console.log(data2.Hello); //=> "Konnichiwa"
// data1の内容を変更したら、data2の内容も変更される！

안전(?)다른 곳에서 제출한 모듈의 내용도 개작했다.
import JSON 모듈을 여러 번 작성할 때 등록 정보를 덮어쓰지 않을 경우 다른 곳에 영향을 줄 수 있으므로 주의하십시오.
동적 import
동적 import에서도 JSON을 사용하여 가져올 수 있습니다.

const { default: data } = await import("./test.json", {
  assert: { type: "json" },
});
console.log(data);

JSON 가져오기는 default export로 처리되기 때문에 대입 시 default에서 받아들여야 합니다.
데이터 URL과 조합할 수도 있습니다.

function JSONParse(code: string) {
  return import("data:application/json," + encodeURIComponent(code), {
    assert: { type: "json" },
  });
}
console.log(await JSONParse('{"Hello":"World"}'));

이것은 단지 JSON.parse일 뿐, 사용 방법이 없다...
JS의 import 문법의 향후
Import Assiertions를 도입하여 import JavaScript 이외의 리소스를 사용할 수 있습니다.우선 JSON의 import 가져오기가 시작되었고 JSON 이외의 import도 가져오기를 논의하고 있습니다.
또한, 다음은 Deno에 국한되지 않고 브라우저가 포함된 JavaScript·웹 표준에 관한 이야기입니다.
CSS/HTML용 import
CSS는 CSS Module Script의 이름으로 표준화되고 있습니다.
크롬과 같은 여러 브라우저는 이미 사용할 수 있다.

import sheet from './styles.css' assert { type: 'css' };

Deno아직 가져오지 않았습니다.(원래 가져오기 여부를 결정하지 않은 경우).저는 개인적으로 앞으로 Deno가 전방 개발에 사용될 것이고 브라우저의 CSS 모듈과 잘 협력할 수 있다면 가져올 수도 있다고 생각합니다.
HTML 가져오기 방법에 대해서는 아직 논의 중인 것 같습니다.
자산 참조
import과 비슷한 문장으로 asset이라는 문법을 도입하는 것을 논의하고 있습니다.

asset Logo from "./logo.gif";

"이 파일은 import이 아니지만 나중에 사용할 것"이라는 문법을 설명하기 위해서다.asset 미리 말씀드리면 밴드 멤버들이 이미지와 HTML을 함께 묶을 수 있다는 것도 가능합니다.그리고 Deno에서 dll 파일 등을 호출할 때 asset로 읽기--allow-read, --allow-net는 로고--allow-ffi가 필요 없고 로고만 사용하면 됩니다.
물론 TS와 인 등 정태 분석에도 도움이 된다.
Import Reflection
Import Assiertion의 자매와 같은 문법으로, import 모듈의 평가 방법을 지정하는 문법이다.

import FooModule from "./foo.wasm" as "wasm-module";

예를 들어, 이 구문은 import Wasm 모듈에 대한 구문입니다.
Wasm을 실행하려면 모델 어레이를 WebAssembly.Module로 변환한 다음 WebAssembly.Instance로 변환해야 합니다.WebAssembly.Module와WebAssembly.Instance 어떤 형식의 import을 선택할 수 있도록 이 문법이 필요합니다.
실제로는 이 프로포탈, 디노 핵심 팀의 루카 카시오나토가 주도했다.며칠 전 발표된'Deno, JavaScript 사양 작성 참여 뉴스에 실린Better support for non-JS assets in the ES module graph처럼 디노도 JS의 모듈 시스템 개선을 고려하고 있는 것 같다.
총결산
Deno1.17종의 JSON을 도입해 보았습니다.
원래 노드.js의 생태계에는 require와 확장자 없는 import이 있을 뿐만 아니라 라이브러리와 밴드 바퀴도 CSS와 JSON을 혼자 지원하는 import의 현황이 있다.
이 일대의 문장 구조가 빨리 통일되어 정상적으로 돌아가기를 바란다.