React_dom_development 在 Deno React 項目中未定義

Question

我想嘗試一下 Deno，所以我決定制作一個簡單的單頁 React 應用程序。 但是，當我嘗試從 CDN 中提取 ReactDOM 時，我得到一個控制台錯誤： react_dom_development_js_2 is undefined 。

我認為發生了什么是它無法解析 ReactDOM CDN，但我可以從我的瀏覽器訪問它？ 我還嘗試用瀏覽器將其解析為（ https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js ）替換它，但我仍然遇到同樣的錯誤。 也許我用錯了deno bundle ？

索引.jsx

import { React } from "https://unpkg.com/react@16/umd/react.development.js";
import { ReactDOM } from "https://unpkg.com/react-dom@16/umd/react-dom.development.js";

ReactDOM.render(<p>Hello</p>, document.findElementById("app"));

索引.html

<html>
  <head>
    <title>Test with Deno</title>
  </head>
  <body>

    <div id="app"></div>
    <script src="index.bundle.js"></script>
  </body>
</html>

我運行deno bundle index.jsx index.bundle.js來創建我的包，

index.bundle.js

// Copyright 2018-2020 the Deno authors. All rights reserved. MIT license.

// This is a specialised implementation of a System module loader.

// @ts-nocheck
/* eslint-disable */
let System, __instantiateAsync, __instantiate;

(() => {
  const r = new Map();

  System = {
    register(id, d, f) {
      r.set(id, { d, f, exp: {} });
    },
  };

  async function dI(mid, src) {
    let id = mid.replace(/\.\w+$/i, "");
    if (id.includes("./")) {
      const [o, ...ia] = id.split("/").reverse(),
        [, ...sa] = src.split("/").reverse(),
        oa = [o];
      let s = 0,
        i;
      while ((i = ia.shift())) {
        if (i === "..") s++;
        else if (i === ".") break;
        else oa.push(i);
      }
      if (s < sa.length) oa.push(...sa.slice(s));
      id = oa.reverse().join("/");
    }
    return r.has(id) ? gExpA(id) : import(mid);
  }

  function gC(id, main) {
    return {
      id,
      import: (m) => dI(m, id),
      meta: { url: id, main },
    };
  }

  function gE(exp) {
    return (id, v) => {
      v = typeof id === "string" ? { [id]: v } : id;
      for (const [id, value] of Object.entries(v)) {
        Object.defineProperty(exp, id, {
          value,
          writable: true,
          enumerable: true,
        });
      }
    };
  }

  function rF(main) {
    for (const [id, m] of r.entries()) {
      const { f, exp } = m;
      const { execute: e, setters: s } = f(gE(exp), gC(id, id === main));
      delete m.f;
      m.e = e;
      m.s = s;
    }
  }

  async function gExpA(id) {
    if (!r.has(id)) return;
    const m = r.get(id);
    if (m.s) {
      const { d, e, s } = m;
      delete m.s;
      delete m.e;
      for (let i = 0; i < s.length; i++) s[i](await gExpA(d[i]));
      const r = e();
      if (r) await r;
    }
    return m.exp;
  }

  function gExp(id) {
    if (!r.has(id)) return;
    const m = r.get(id);
    if (m.s) {
      const { d, e, s } = m;
      delete m.s;
      delete m.e;
      for (let i = 0; i < s.length; i++) s[i](gExp(d[i]));
      e();
    }
    return m.exp;
  }

  __instantiateAsync = async (m) => {
    System = __instantiateAsync = __instantiate = undefined;
    rF(m);
    return gExpA(m);
  };

  __instantiate = (m) => {
    System = __instantiateAsync = __instantiate = undefined;
    rF(m);
    return gExp(m);
  };
})();

System.register(
  "index",
  [
    "https://unpkg.com/react@16/umd/react.development.js",
    "https://unpkg.com/react-dom@16/umd/react-dom.development.js",
  ],
  function (exports_1, context_1) {
    "use strict";
    var react_development_js_1, react_dom_development_js_1;
    var __moduleName = context_1 && context_1.id;
    return {
      setters: [
        function (react_development_js_1_1) {
          react_development_js_1 = react_development_js_1_1;
        },
        function (react_dom_development_js_1_1) {
          react_dom_development_js_1 = react_dom_development_js_1_1;
        },
      ],
      execute: function () {
        react_dom_development_js_1.ReactDOM.render(
          react_development_js_1.React.createElement("p", null, "Hello"),
          document.findElementById("app"),
        );
      },
    };
  },
);

__instantiate("index");

Answer 1

這里的問題是由於典型的 React 和 ReactDOM 包被編寫為 commonJS 包。

Deno 默認要求所有模塊都使用 ES Modules (ESM) 編寫。 https://github.com/pikapkg/react是使用 ESM 的 React 和 ReactDOM 的構建，因此它們應該可以在 Deno 中導入。 與 CDN 鏈接

deno 中有一個標准庫模塊可讓您使用 commonJS 模塊，但您需要小心使用它們，特別是如果它們需要特定於節點的功能： https://deno.land/std/node#commonjs-module-loading

Answer 2

TypeScript 不允許從 html 或以文件擴展名結尾的導入。 所以現在你可以使用// @ts-ignore它們，這將允許 deno 工作。

deno 有一個 Visual Studio 代碼擴展，但在撰寫本文時它似乎有點不穩定。 如果並且當它正常工作時，您可以通過在項目的根目錄中定義一個設置文件夾來配置 deno 以在每個項目的基礎上工作，例如.vscode/settings.json 。

{
  "deno.enable": true
}

React_dom_development 在 Deno React 項目中未定義

問題描述

2 個解決方案

解決方案1
2 已采納 2020-05-30 20:03:25

解決方案2
0 2020-05-30 19:43:53

React_dom_development 在 Deno React 項目中未定義

問題描述

2 個解決方案

解決方案1 2 已采納 2020-05-30 20:03:25

解決方案2 0 2020-05-30 19:43:53

解決方案1
2 已采納 2020-05-30 20:03:25

解決方案2
0 2020-05-30 19:43:53