2

我使用 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;
    }
}

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

在此处输入图像描述

4

3 回答 3

0

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

在 github 上打开构建任务

于 2017-01-13T14:55:13.397 回答
0

2021 更新

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

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

1.安装点网

首先,下载 dotnet 框架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 .

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

➜  Sandbox dotnet run

3. 创建一个 Aurelia 应用程序

首先,从node.js网站安装 node。然后,从 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

...

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

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

npx webpack -w一旦 npm 安装了软件包,您就可以使用目录中的命令启动您的应用程序 app。此命令告诉 Webpack 编译包含 HTML、TypeScript(编译为 JavaScript)和 CSS 文件的 Aurelia 源代码,并将其放在lib目录下。该-w标志告诉 Webpack 观察源代码的变化。

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

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

➜  Sandbox dotnet run
Building...

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

有关屏幕截图和代码片段的详细分步指南,请查看我关于同一主题的文章。

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

于 2021-04-11T09:07:51.633 回答
0

使用 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。

于 2017-04-04T21:40:45.973 回答