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 回答