Как импортировать пакеты в мое приложение Aurelia

Question

У меня есть успешное приложение, использующее Aurelia, однако я разработал его с помощью VSCode и скелета, который дает вам Aurelia. Теперь, когда CLI доступен, я пытаюсь перенести приложение в проект VS2015/Asp.net Core, но у меня возникают некоторые трудности.

В проекте VSCode есть файл bundles.js в папке сборки, которую Gulp использует для его компиляции (из того, что я понимаю). В этом файле есть раздел «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 проект, я импортировал самозагрузки CSS на странице HTML с помощью тега требуется. Это все-таки правильный способ сделать что-то? Если да, как мне исправить эту проблему с импортом?

EDIT

Ответ ниже помог бы получить немного дальше. Теперь проект строит и запускает без каких-либо ошибок, однако я не могу правильно загрузить загрузочный 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 в загрузочный пакет. Теперь, в моем файле машинописных файлов, я звоню import 'jquery' и import 'bootstrap', и я еще не получаю css. Не знаете, как это исправить.

Answer 1

Что происходит, так это то, что aurelia skeleton-esnext использует SystemJS, а Aurelia-CLI использует RequireJS (SystemJS и WebPack будут поддерживаться в CLI в ближайшем будущем). SystemJS и RequireJS являются модульными загрузчиками, и они ведут себя немного иначе. Вот почему у вас есть два разных способа настройки модулей.

Эта ссылка показывает, как настроить LIB, который содержит файл 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 загружать файлы CSS. Например, при установке nprogress использовании JSPM, он генерирует следующий файл:

/* */ 
"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

..! Проверьте contact-manager tutorial Роб Eisenberg

Он показывает, как добавить 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, в том числе после редактирования.