ASP .Net Core 3.1 octokit rest npm 包问题

Question

我使用 npm 和 gulpfile.js 将 npm 包导出到 'wwwroot' 下的 'lib' 文件夹；这很有用，每当我更新特定的 npm 包时，如果它在我的 gulpfile.js 监视列表中，它就会将内容推送到 'lib' 文件夹。

我遇到的问题是，我曾经使用手动提取的 ocktokit-rest 副本来查询 public api 一些回购数据。最近这已经停止工作，我假设 GitHub 已经更新了他们的 api 这对我的旧版本的 ocktokit-rest 有一些破坏性的变化。因此，考虑到这一点，我使用 npm package.json 安装了 @Ocktokit/rest 版本 18.0.9。然后创建以下目录：

~/lib/@octokit/rest/

根据文档，我需要引用其中的一个 index.js 文件。因此，因为 Razor 不喜欢在路径中使用 @ 符号，所以我在 _layout.cshtml

中使用了以下内容

<script src="@Url.Content("~/lib/@octokit/rest/dist-src/index.js")" type="module"></script>

我添加了 type="module"，因为我最初在 index.js 文件中的导入语句遇到一些问题。

以上路径的 index.js 文件内容如下：

import { Octokit as Core } from "@octokit/core";
import { requestLog } from "@octokit/plugin-request-log";
import { paginateRest } from "@octokit/plugin-paginate-rest";
import { restEndpointMethods } from "@octokit/plugin-rest-endpoint-methods";
import { VERSION } from "./version";
export const Octokit = Core.plugin(requestLog, restEndpointMethods, paginateRest).defaults({
    userAgent: `octokit-rest.js/${VERSION}`,
});

这会在 chrome 调试器中引发以下错误：

Uncaught TypeError: Failed to resolve module specifier "@octokit/core". Relative references must start with either "/", "./", or "../".

我不太喜欢调整 @octokit/ 引用以支持 '../../' 的想法，因为每次我的 gulpfile.js npm push 任务 运行s 我必须手动更改此文件。然而为了调试这个我经历了并调整 index.js 看起来像这样：

import { Octokit as Core } from "../../core";
import { requestLog } from "../../plugin-request-log";
import { paginateRest } from "../../plugin-paginate-rest";
import { restEndpointMethods } from "../../plugin-rest-endpoint-methods";
import { VERSION } from "./version";
export const Octokit = Core.plugin(requestLog, restEndpointMethods, paginateRest).defaults({
    userAgent: `octokit-rest.js/${VERSION}`,
});

当我这样做时，每次导入时我都会收到类似的错误消息，看起来像这样：

index.js:4 GET https://localhost:44364/lib/@octokit/plugin-rest-endpoint-methods net::ERR_ABORTED 404

现在上面的URL指向的是目录而不是特定的文件，如果我运行上面通过单个文件我可以看到它在浏览器中加载并显示文件。所以如果我输入：

https://localhost:44364/lib/@octokit/plugin-rest-endpoint-methods/dist-src/endpoints-to-methods.js

我可以在浏览器中看到显示的 js 文件，所以我知道可以找到它。现在理想情况下，我希望能够在我编写的另一个自定义 js 中使用这个包，它遍历我的 repos 并创建带有所有信息的漂亮小卡片，所以我基本上只是想像这样使用它：

var octokit = new Octokit({ userAgent: 'agentName' });

但是上面显然是在抱怨Octokit的存在

所以我想我的问题是，这到底是怎么回事？我显然在这里遗漏了一些东西，所以如果有人对我需要寻找或研究的方向有任何想法，我将非常感激。

这可能与 octokit 包完全无关，更有可能的是我只是不明白如何正确地将这些类型的 JavaScript 库导入我的 asp .net核心解决方案

Answer 1

添加 Octokit 的几个部分您遇到了困难：处理 @ 符号、导入它的范围以及您尝试使用旨在用于构建工具。

@ 在 Razor 页面中

当您在 Razor 页面上下文中的 <script> 标记中内联编写 JavaScript 时，您需要使用 @@ escape the @ character。例如，如果您引用 Octokit 路径，您将编写 @@octokit/rest.

范围

当您使用 type=module 时，您的代码具有 ，使您无法在模块外部引用 Octokit 变量。为了突破模块范围，您可以将 Octokit 变量附加到 window 对象：

window.Octokit = new Octokit({ userAgent: 'agentName' });

然后，您在其他脚本块中的代码可以正常访问 Octokit：

const { data } = await Octokit.request("/user");

构建 Octokit

您正在导入的文件不是供浏览器直接使用的。它期望您将其导入 JavaScript 构建工具，而不是直接从浏览器将其作为模块导入。

您尝试导入客户端的 index.js 文件旨在与某些 JavaScript 构建工具（如 Webpack）一起使用。要在 gulp 中按照您想要的方式进行工作，您需要修改 gulpfile.js 以包含某种插件，该插件将导入 @octocat/rest 并将其输出到可供以下人使用的文件中一个浏览器。

要使用 Webpack 执行此操作，您需要为 gulp 安装 Webpack 插件： npm install --save-dev webpack-stream gulp-rename

然后，在您的 gulpfile.js 旁边创建一个名为 index.js 的文件，用于导入库并对其执行一些操作：

import { Octokit } from "@octokit/rest"

window.Octokit = new Octokit({ userAgent: 'agentName' });

现在，修改您的 gulpfile.js 以获取 index.js 并通过 webpack 插件将其传输：

const gulp = require('gulp');
const webpack = require('webpack-stream');
const rename = require('gulp-rename');

gulp.task('default', () =>
    gulp.src(['index.js'])
        .pipe(webpack())
        .pipe(rename("index.js"))
        .pipe(gulp.dest('lib/octokit/rest/'))
);

在 运行 gulp 之后，您应该有一个输出文件，该文件已经解析了 @octokit/rest!

所需的所有依赖项

替代解决方案

为了省去这个特定包的麻烦，您可以 load Octokit from their CDN 吗？ CDN 为您处理所有构建和包解析。您的代码可以是：

<script type="module">
    import { Octokit } from "https://cdn.skypack.dev/@@octokit/rest";
    window.Octokit = new Octokit({ userAgent: 'agentName' });
</script>

（请注意，@@ 将转义 Razor 页面上的 @ 符号。）

大多数软件包都提供 CDN 选项来加载其库客户端，而无需使用构建工具。即使他们没有正式提供 CDN，像 jsdelivr or unpkg 这样的网站仍然可以提供导入这些文件的方法。

---

将来某个时候，浏览器可能会支持 import-maps。然后，您将能够通过浏览器处理包解析，并在您的 Razor 页面上执行如下操作：

<script type="importmap">
{
    "imports": {
        "/@@octokit": "/lib/@@octokit/"
    }
}
</script>
<script type="module">
    import { Octokit } from '@@octokit/rest';
    var octokit = new Octokit({ userAgent: 'agentName' });
</script>

看起来这可能适用于像 system-js, where you would add the s.js loader and replace importmap with systemjs-importmap.

这样的 polyfill