Question

我有一个使用Aurelia运行的成功应用程序，但是我使用VSCode和Aurelia为您提供的骨架开发了它。既然CLI可用，我正在尝试将应用程序移植到VS2015 / Asp.net核心项目，但我遇到了一些困难。

在VSCode项目中，在Gulp用来编译它的构建文件夹中有一个bundles.js文件（据我所知）。在那个文件中，有一个“dist / aurelia”部分，这就是我放入我需要导入的所有额外包的地方，它将导入css和js文件。看起来像这样：

"dist/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-fetch-client",
        "aurelia-router",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-polyfills",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
        "bootstrap",
        "bootstrap/css/bootstrap.css!text",
        "fetch",
        "jquery",
        "rstacruz/nprogress",
        "moment",
        "systemjs/plugin-text/*.js",
        "components/jqueryui",
        "quilljs",
        "rich-text",
        "util",
        "signalr"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": false,
        "rev": false
      }
    }

但是，当我使用命令au new --here在VS2015中创建新项目时，生成的项目看起来有点不同。我有一个aurelia_project文件夹，其中看起来就像所有的构建/编译一样。在那个文件夹中，有一个aurelia.json文件，这就是我需要放置所有软件包的地方（我正在使用NPM btw）我被告知。当我尝试导入这些包时，它会自动将.js附加到文件路径并完全省略CSS，因此在页面加载时无法加载我的CSS。这是aurelia.json的样子：

"dependencies": [
          "aurelia-binding",
          "aurelia-bootstrapper",
          "aurelia-dependency-injection",
          "aurelia-event-aggregator",
          "aurelia-framework",
          "aurelia-history",
          "aurelia-history-browser",
          "aurelia-loader",
          "aurelia-loader-default",
          "aurelia-logging",
          "aurelia-logging-console",
          "aurelia-metadata",
          "aurelia-pal",
          "aurelia-pal-browser",
          "aurelia-path",
          "aurelia-polyfills",
          "aurelia-route-recognizer",
          "aurelia-router",
          "aurelia-task-queue",
          "aurelia-templating",
          "aurelia-templating-binding",
          {
            "name": "text",
            "path": "../wwwroot\\scripts/text"
          },
          {
            "name": "aurelia-templating-resources",
            "path": "../node_modules/aurelia-templating-resources/dist/amd",
            "main": "aurelia-templating-resources"
          },
          {
            "name": "aurelia-templating-router",
            "path": "../node_modules/aurelia-templating-router/dist/amd",
            "main": "aurelia-templating-router"
          },
          {
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          },
          {
            "name": "jquery",
            "path": "../node_modules/jquery/dist/jquery.min"
          },
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist/js/",
            "main": "bootstrap"
          }
        ]
      }

所以，我是我的VSCode项目，我通过require标签在html页面上导入了bootstrap css。这仍然是做事的正确方法吗？如果是这样，我该如何解决此导入问题？

修改

下面的答案有助于进一步了解。现在项目构建和运行没有任何错误，但我似乎无法正确导入bootstrap css。

这是我的新aurelia.json文件的片段：

{
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          },
          "jquery",
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist/js",
            "main": "bootstrap",
            "resources": [
              "../css/*.css"
            ]
          }

所以这是将css文件添加到bootstrap包中。现在，在我的打字稿文件中，我正在调用import 'jquery'和import 'bootstrap'，我仍然没有得到任何CSS。不知道如何解决这个问题。

Answer 1

aurelia skeleton-esnext使用SystemJS，Aurelia-CLI使用RequireJS（在不久的将来CLI将支持SystemJS和WebPack）。 SystemJS和RequireJS是模块加载器，它们的行为略有不同。这就是为什么你有两种不同的方式来配置模块。

此链接显示如何配置具有css文件的lib： http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/9

"dependencies": [
  ...
  {
    "name": "nprogress",
    "path": "../node_modules/nprogress",
    "main": "nprogress",
    "resources": [
      "nprogress.css"
    ]
  }
  ...
]

上面的代码告诉RequireJS将nprogress.css放入捆绑文件中。但是，它不会告诉导入/需要css文件的位置或时间，因此您必须在应用程序中导入/要求它。您可以在视图中使用<require from="nprogress/nprogress.css"></require>，也可以在视图模型中使用import 'nprogress/nprogress.css';。

当您使用SystemJS时，您不必导入某些css文件，因为JSPM可以检测某些依赖项并生成一种特殊语法，告诉SystemJS加载CSS文件。例如，使用JSPM安装nprogress时，它会生成以下文件：

/* */ 
"format global";
"deps ./nprogress.css!";
/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
 * @license MIT */

;(function(root, factory) {
///....

行“deps ./nprogress.css！”;告诉SystemJS在加载模块时自动导入/需要nprogress.css。因此，您不必在视图或视图模型中导入/要求css文件。

希望这有帮助！

Answer 2

查看Rob Eisenberg的contact-manager tutorial

它显示了如何将Jquery，Bootstrap添加到aurelia.json：

"dependencies": [
...
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
  "css/bootstrap.css"
]
},
...
]

如何在app.html中要求它：

<require from="bootstrap/css/bootstrap.css"></require>

我能够成功地为D3做同样的事情：

{
"name": "d3",
"path": "../node_modules/d3/build",
"main": "d3.js"
},

然后我能够在我的组件.js文件中使用它

import * as d3 from d3

[编辑]刚刚注意到教程链接包含在上面接受的答案中，但是保持这个，因为它显示了添加jquery / bootstrap的实际代码，其中OP示例中缺少一些元素，包括在编辑之后。

如何在Aurelia应用程序中导入包

2 个答案: