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

Question

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

在 VSCode 项目中，Gulp 用来编译它的 build 文件夹中有一个 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
      }
    }

但是，当我在 VS2015 中使用命令au new --here 创建新项目时，生成的项目看起来有点不同。我有一个 aurelia_project 文件夹，其中看起来像是所有构建/编译发生的地方。在那个文件夹中，有一个 aurelia.json 文件，这是我需要放置所有包的地方（我正在使用 NPM 顺便说一句）我被告知。当我尝试导入这些包时，它会自动将 .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。这仍然是正确的做事方式吗？如果是这样，我该如何解决这个导入问题？

编辑

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

这是我的新 aurelia.json 文件的 sn-p：

{
            "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 文件添加到引导程序包中。现在，在我的打字稿文件中，我正在调用 import 'jquery' 和 import 'bootstrap'，但我仍然没有得到任何 css。不知道如何解决这个问题。

Answer 1

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

此链接显示如何配置具有 css 文件的库： 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 加载 CSSs 文件。例如，当您使用 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 示例中缺少一些元素，包括在编辑之后。