ASP .Net Core 3.1 octokit其余npm软件包问题

如何解决ASP .Net Core 3.1 octokit其余npm软件包问题

我使用npm和gulpfile.js实质上将npm软件包导出到“ wwwroot”下的“ lib”文件夹中；这样行之有效，只要我更新特定的npm软件包（如果它在我的gulpfile.js监视列表中），它就会将内容推送到“ lib”文件夹中。

我遇到的问题是，我曾经使用ocktokit-rest的手动提取副本来查询公共api的一些回购数据。最近，这已停止工作，我认为GitHub已更新其api，该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调试器中引发以下错误：

未捕获的TypeError：无法解析模块说明符 “ @ octokit /核心”。相对引用必须以“ /”、“./”， 或“ ../”。

我不特别喜欢将@octokit /引用调整为'../../'的想法，因为这样每次我执行gulpfile.js npm push任务时，手动更改此文件。但是，为了进行调试，我仔细检查并调整了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,});

执行此操作时，每次导入时我都会收到类似的错误消息：

index.js：4 GET https：// localhost：44364 / lib / @ octokit / plugin-rest-endpoint-methods 网址：： ERR_ABORTED 404

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

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

我可以看到浏览器中显示了js文件，因此我知道可以将其链接到。现在，理想情况下，我希望能够在我编写的另一套自定义js中使用该程序包，该自定义js通过我的存储库进行迭代并创建包含所有信息的漂亮的小卡片，因此我基本上只是在尝试像这样使用它：>

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

但是显然，以上内容是在抱怨Octokit的存在。

所以我想我的问题是，压裂是什么？我显然在这里缺少什么，所以如果有人对我需要寻找或研究的方向有任何想法，我将非常感激。

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

解决方法

添加Octokit时，您会遇到一些困难：处理@符号，导入符号的范围以及您试图使用用于构建工具的文件的事实

@在Razor页面中

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

范围

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

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

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

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

建立Octokit

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

您要导入客户端的index.js文件旨在与某些JavaScript构建工具（例如Webpack）一起使用。为使此功能以您想要的状态工作，您需要修改gulpfile.js以包括某种插件，该插件可以导入@octocat/rest并将其输出到浏览器可用的文件中。 / p>

要使用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选项来加载其库客户端，而无需使用构建工具。即使jsdelivr或unpkg这样的网站即使未正式提供CDN，也仍然可以提供导入这些文件的方式。

---

将来，浏览器可能会支持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这样的polyfill中使用，您可以在其中添加s.js loader并将importmap替换为systemjs-importmap。