Aurelia + Asp.net Web Api + Typescript + JSPM

Posted 2023-02-19

技术标签:

【中文标题】Aurelia + Asp.net Web Api + Typescript + JSPM【英文标题】： 【发布时间】：2017-05-28 21:18:50 【问题描述】：

我使用 Visual Studio Asp.Net SPA 项目模板创建了一个 ASP.net MVC WebApi 2 项目，并通过运行以下 jspm 命令将 Aurelia 安装到根文件夹中。我选择了 TypeScript 作为转译器。

jspm init

jspm install aurelia-framework

jspm install aurelia-bootstrapper

现在我需要为项目安装/配置 TypeScript。

有人可以发布要遵循的步骤吗？

更新如何为现有项目添加 Typescript 支持？我将app.js 文件重命名为app.ts。我也添加了tsconfig.json 文件。

项目文件夹结构：

tsconfig file:

  "compilerOptions": 
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "module": "system"

App.Ts 文件

import  inject  from 'aurelia-framework';
import  HttpClient  from 'aurelia-http-client';


@inject(HttpClient)

export class App 

    message: string;
    http: any;

    constructor(httpClient: HttpClient) 
        this.http = httpClient;

当我构建项目时，由于以下错误，构建失败。

【问题讨论】：

你应该看看我们的 TypeScript ASP.Net Core Skeleton。可以在这里找到：github.com/aurelia/skeleton-navigation/tree/master/… 嗨 Ashley & @Mvision，我需要为 asp.net web api 2 应用程序实现这一点。不适用于 asp.net 核心项目。我已经用更多细节更新了这个问题。对困惑感到抱歉。你能帮忙吗？ @Ashley，你有 asp.net Web Api + TypeScript 的项目模板吗？ 【参考方案1】：

您正在寻找的 gulp 任务是 'build' ，可以在这里找到，它是骨架项目的一部分。

Open build task on github

【讨论】：

【参考方案2】：

使用 WebApi 2？我想我明白了。它让我发疯了足够长的时间。

好的，从顶部开始。创建一个新的 ASP.NET WebApi 项目。

在命令提示符下打开项目文件夹（.csproj 文件所在的文件夹）。

运行 jspm 初始化。接受所有默认值，除了选择 Typescript 作为您的转译器。

运行

jspm install aurelia-framework aurelia-bootstrapper aurelia-pal-browser

使 config.js 文件的第一部分如下所示：

System.config(
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  paths: 
    "*": "client/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"

你可以使用 src 代替 client，但我喜欢 client，因为其他地方有很多源代码，如果你理解我的话。

好的，现在我们到了某个地方。弹出打开您的 Views 文件夹，打开 index.cshtml 并使其看起来像这样 -

@
    Layout = null;

<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
  </head>
  <body aurelia-app>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

接下来，在项目的根目录下添加一个名为 typings.json 的文件，并将以下内容放入其中。


  "name": "WhatEverYouCalledThisThing",
  "dependencies": 
    "aurelia-binding": "github:aurelia/binding",
    "aurelia-bootstrapper": "github:aurelia/bootstrapper",
    "aurelia-dependency-injection": "github:aurelia/dependency-injection",
    "aurelia-event-aggregator": "github:aurelia/event-aggregator",
    "aurelia-fetch-client": "github:aurelia/fetch-client",
    "aurelia-framework": "github:aurelia/framework",
    "aurelia-history": "github:aurelia/history",
    "aurelia-history-browser": "github:aurelia/history-browser",
    "aurelia-loader": "github:aurelia/loader",
    "aurelia-logging": "github:aurelia/logging",
    "aurelia-logging-console": "github:aurelia/logging-console",
    "aurelia-metadata": "github:aurelia/metadata",
    "aurelia-pal": "github:aurelia/pal",
    "aurelia-pal-browser": "github:aurelia/pal-browser",
    "aurelia-path": "github:aurelia/path",
    "aurelia-polyfills": "github:aurelia/polyfills",
    "aurelia-route-recognizer": "github:aurelia/route-recognizer",
    "aurelia-router": "github:aurelia/router",
    "aurelia-task-queue": "github:aurelia/task-queue",
    "aurelia-templating": "github:aurelia/templating",
    "aurelia-templating-binding": "github:aurelia/templating-binding",
    "aurelia-templating-resources": "github:aurelia/templating-resources",
    "aurelia-templating-router": "github:aurelia/templating-router"
  ,
  "globalDevDependencies": 
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "aurelia-protractor": "github:aurelia/typings/dist/aurelia-protractor.d.ts",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  ,
  "globalDependencies": 
    "url": 
    "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
    "whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"

然后快速运行

npm install typings –g

或者，如果你讨厌等待，

yarn global add typings

然后

typings install

差不多了，再走两步就到了。

首先，在您的 src 或客户端文件夹的根目录中创建一个名为 typings.d.ts 的文件，并将这一行添加到其中 -

/// <reference path="../typings/index.d.ts" />

最后，打开 nuget 包管理器控制台并点击

安装包 es6-promise.TypeScript.DefinitelyTyped

然后

安装包 es6-collections.TypeScript.DefinitelyTyped

你应该准备好了。

这并不能很好地为您捆绑东西，您会发现最好将 CSS 添加到 HTML 的 HEAD 中 - 抱歉！ - 但这足以让事情正常进行。

对于生产而言，您并不真的希望 WebApi 托管您的 SPA。

【讨论】：

【参考方案3】：

2021 年更新

TL; DR： 如果您不想阅读完整答案，只需克隆 Sandbox 存储库并按照入门部分中的说明进行操作。

如果您需要在 ASP.NET (Core) 上使用 TypeScript 设置 Aurelia SPA，以下是所有步骤。

1。安装 Dotnet

首先，download the dotnet framework。您可以通过在终端窗口中输入dotnet 来检查它是否安装正确。它应该为您提供以下输出。

2。创建 ASP.NET 项目

接下来，使用 dotnet 提供的生成器创建一个 MVC 应用程序。生成器是可让您使用单个命令快速设置完整应用程序的工具。对于 MVC 应用程序，运行以下命令。

➜  dotnet dotnet new mvc --name Sandbox

如果您不提供 --name 标志，dotnet 命令会在您运行该命令的同一目录中创建 MVC 项目。

现在dotnet 已经创建了一个 ASP.NET MVC 项目，切换到目录并在 VS Code 中打开该项目。

➜  cd Sandbox
➜  Sandbox code .

要运行，请从Sandbox 目录中键入dotnet run 命令。

➜  Sandbox dotnet run

3。创建 Aurelia 应用程序

首先，从node.js 网站安装节点。然后，从 Sandbox 目录运行 npx makes aurelia 命令，该命令将指导您设置新的 Aurelia 应用程序。

➜  Sandbox npx makes aurelia

...

✔ Please name this new project: › app
✔ Would you like to use the default setup or customize your choices? › Default TypeScript Aurelia 2 App
✔ Do you want to install npm dependencies now? › No

...

使用以下代码更新app/webpack.config.js 文件中的output.path 属性。

output: 
    // put the generated output in the `wwwrooot\lib` directory
    path: path.resolve(__dirname, '..', 'wwwroot', 'lib'),
    // ...
,

将以下script 标记添加到Views/Shared/_Layout.cshtml 文件中。

<script src="~/lib/entry.bundle.js"></script>

将Views/Home/index.cshtml文件的全部内容替换为：

<my-app></my-app>

4。运行应用程序

首先，通过切换到app 目录并运行npm install 命令来安装所需的npm 包。

➜  Sandbox cd app
➜  app npm install

npm 安装软件包后，您可以使用 npx webpack -w 命令从 app 目录启动您的应用程序。该命令告诉 Webpack 编译包含 HTML、TypeScript（编译为 javascript）和 CSS 文件的 Aurelia 源代码，并将其放在 lib 目录下。 -w 标志告诉 Webpack 观察源代码的变化。

➜  app npx webpack -w
...
...
webpack 5.31.0 compiled successfully in 5677 ms

最后，使用 Sandbox 目录中的 dotnet run 命令启动 ASP.NET 服务器。您应该在不同的终端窗口中运行此命令。

➜  Sandbox dotnet run
Building...

要验证 Webpack 是否正在监视代码更改，请在 app/src/my-app.ts 文件中进行简单修改并重新加载浏览器。

有关屏幕截图和代码 sn-ps 的详细分步指南，请查看我在同一主题上的 article。

当然，ASP.NET 和 Aurelia 应用程序都包含大量样板代码。如果你和我一样喜欢从头开始每个新项目，只需从 GitHub 下载/克隆 Sandbox 项目。然后按照 README 中的说明设置干净的沙箱。它具有更好的项目布局和生产就绪设置。

【讨论】：

以上是关于Aurelia + Asp.net Web Api + Typescript + JSPM的主要内容，如果未能解决你的问题，请参考以下文章

SPA (Aurelia) + ASP.NET Core WebAPI + Google 身份验证

Asp.Net Web API 2第五课——Web API路由

ASP.NET Web API教程1.1 第一个ASP.NET Web API

Asp.Net Web API 2第三课——.NET客户端调用Web API

Web API1.1 ASP.NET Web API入门

Asp.Net Web API 2第六课——Web API路由和动作选择