如何在我的Aurelia应用程序中导入包 [英] How to import packages within my Aurelia application

问题描述

我有一个成功的应用程序运行使用Aurelia，但我开发它使用VSCode和Aurelia给你的骨架。现在CLI的可用我试图将应用程序移植到VS2015 / Asp.net核心项目，但我有一些困难。

I have a successful app running using Aurelia, however I developed it using VSCode and the skeleton that Aurelia gives you. Now that the CLI is available I'm trying to port the application over to a VS2015/Asp.net Core project but I'm having some difficulties.

在VSCode项目中，Gulp用来编译它的build文件夹中有一个bundles.js文件（根据我的理解）。在该文件中，有一个dist / aurelia部分，这是我把所有额外的包，我需要导入，它将导入css和js文件。看起来像这样：

In the VSCode project, there's a bundles.js file within the build folder that Gulp uses to compile it (from what I understand). In that file, there's a "dist/aurelia" section and that's where I put all of the extra packages that I need to import and it will import the css and js files. Looks like this:

"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的样子：

However, when I use the command au new --here to create a new project within VS2015, the generated project looks a little different. I have an aurelia_project folder and within that it looks like that's where all of the building/compiling happens. In that folder, there's an aurelia.json file and that's where I need to put all of the packages (I'm using NPM btw) I've been told. When I try to import these packages, it appends .js to the file path automatically and totally leaves out CSS so it's failing to load my CSS when the page loads. Here's what the aurelia.json looks like:

"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"
          }
        ]
      }

b $ b

所以，我是我的VSCode项目，我通过require标签导入bootstrap css在html页面。这还是正确的做事方式吗？如果是，如何修复此导入问题？

So, I'm my VSCode project, I imported bootstrap css on the html page via a require tag. Is that still the proper way to do things? If so, how do I fix this importing issue?

EDIT

下面的答案有助于进一步。

The answer below helped be get a bit further. Now the project builds and runs without any errors however, I can't seem to get the bootstrap css imported correctly.

这里是我的新aurelia.json文件的一个片断：

Here's a snippet of my new aurelia.json file:

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

So this is adding the css file into the bootstrap package. Now, in my typescript file, I'm calling import 'jquery' and import 'bootstrap' and I don't get any css still. Not sure how to fix this.

推荐答案

会发生什么是aurelia框架esnext使用SystemJS，Aurelia-CLI使用RequireJS在不久的将来，CLI将支持SystemJS和WebPack。 SystemJS和RequireJS是模块加载器，它们的行为有点不同。这是为什么你有两种不同的方式配置模块。

What happens is that aurelia skeleton-esnext uses SystemJS, and Aurelia-CLI uses RequireJS (SystemJS and WebPack will be supported on CLI in a near future). SystemJS and RequireJS are module loaders, and they behave a little different. That's why you have 2 different ways to configure the modules.

这个链接显示如何配置一个lib有一个css文件：
http://aurelia.io/hub.html#/

This link shows how to configure a lib that has a css file: 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 /

The above code tells RequireJS to put nprogress.css in the bundled file. However, it doesn't tell where or when to import/require the css file, so you must import/require it in your app. Either using <require from="nprogress/nprogress.css"></require> in your view, or using import 'nprogress/nprogress.css'; in your view-model.

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

When you were using SystemJS you didn't have to import some css files because JSPM can detect some dependencies and generate a special syntax that tells SystemJS to load CSSs files. For example, when you install nprogress using JSPM, it generates the following file:

/* */ 
"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自动导入/ require nprogress.css ，因此，您不必在视图或视图模型中导入/ require css文件。

The line "deps ./nprogress.css!"; tells SystemJS to automatically import/require nprogress.css when you load the module. Therefore, you don't have to import/require the css file in your view or view-model.

希望这有助于！

这篇关于如何在我的Aurelia应用程序中导入包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！