WedX - журнал о программировании и компьютерных науках

Как использовать бриз в аурелии?

Я новичок в aurelia и использую проект скелета-типографа-aspnetcore для создания своего первого приложения. Скелет работает нормально, но когда я следовал руководству по плагину aurelia-breeze, чтобы интегрировать его в свое приложение, я использую

import breeze from 'breeze';

в файле ts, но есть ошибка: не удается найти модуль «бриз». Я так много гуглил, что кто-то упомянул, что файл d.ts отсутствует, и я скопировал его из git(https://github.com/jdanyow/aurelia-breeze/blob/master/dist/aurelia-breeze.d.ts) в папку typings, но d.ts возникла другая ошибка в первой строке, не удается найти модуль «бриз-клиент»:

import breeze from 'breeze-client';

Я проверил папку nmp (wwwroot/nmp), там есть и aurelia-breeze, и breeze-client, то же самое и в package.json.

Я сравнил файл aurelia-breeze.d.ts с другим файлом d.ts в папке typings, все файлы поставляются со скелетом, названным index.d.ts, и с typings.json для декаляции.

Так что я предполагаю, что ошибка должна быть вызвана конфигурацией типизации, и я долго гуглил, но ответа нет, можете ли вы сказать мне, как заставить это работать? заранее спасибо.

22.11.2016

Ответы:


1

Я не использую TypeScript в своем приложении Aurelia, но у меня была такая же проблема с интеграцией бриза. В конце концов я решил это (или, скорее, нашел этот обходной путь), добавив его как простой скрипт вместо того, чтобы загружать его из node_modules (или jspm_packages, в зависимости от того, какой из них вы используете).

Это мой новый файл main.js:

export function configure(aurelia) {    
    aurelia.use
        .standardConfiguration()        
        .plugin('aurelia-knockout');

    return aurelia.start().then(() => {
        require(["../scripts/lib/breeze.debug"], function(breeze) {
            require([
                "../scripts/lib/breeze.savequeuing",
            ], function(savequeuing){
                aurelia.setRoot();
            });             
        });                     
    });    
}

Надеюсь это поможет. В моем случае я даже интегрирую плагин breeze.savequeuing для breeze после загрузки самого breeze. Хотя, вероятно, есть лучшие способы сделать это.

Также обратите внимание, что я использую «require» в качестве загрузчика модуля. Я использую интерфейс командной строки Aurelia, поэтому я установил его в файле aurelia.json в разделе «сборка» следующим образом:

"loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "config": {
        "waitSeconds": 0,
        "paths": {
          "jquery": "../scripts/lib/cdn/jquery-3.1.0.min",
          "knockout": "../scripts/lib/knockout-3.4.0"          
        }
      },
....
}

и под "связками" вот так:

     {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/bluebird/js/browser/bluebird.core.js",          
          "scripts/lib/require.js"
        ],
 ...
}
02.12.2016

2

Чтобы использовать клиент breezejs с aurelia, вы должны сделать следующее:

  1. Установите необходимые пакеты.
npm install breeze-client --save
npm install aurelia-breeze --save
  1. Настройте зависимости от загрузчика модулей.

    В моем случае я использую amd с requirejs, поэтому зависимости будут следующими...

paths...

"aurelia-breeze":'../node_modules/aurelia-breeze/dist/amd/aurelia-breeze'
"breeze-client": '../node_modules/breeze-client/breeze.base.min'
"breeze.modelLibrary": '../node_modules/breeze-client/breeze.modelLibrary.backingStore'
"breeze.dataService": '../node_modules/breeze-client/breeze.dataService.webApi'
"breeze.uriBuilder": '../node_modules/breeze-client/breeze.uriBuilder.json'
 

shims...

'aurelia-breeze': {
        exports: 'BreezeObjectObserver',
        deps: ['breeze-client', 'breeze.modelLibrary', 'breeze.dataService', 'breeze.uriBuilder']
      }

'breeze-client': {
        exports: 'breeze'
      }

(требуется файл config.js и полные файлы aurelia.json, приведенные ниже)

  1. Импортируйте и инициализируйте библиотеку в своем проекте TypeScript по мере необходимости.
import * as breeze from 'breeze-client'

  breeze.NamingConvention.camelCase.setAsDefault();  
  breeze.config.initializeAdapterInstance('modelLibrary',
'backingStore', true);
  1. Готово!! теперь вы можете использовать бриз. то есть
const entityManager = new
EntityManager'https://zzaapi.azurewebsites.net/breeze/zza')   const
entityQuery = EntityQuery.from(‘Customers’);

entityManager.executeQuery(entityQuery).then(queryResult => 
console.log(queryResult.results));

(от отличного курса Брайана Нойеса по https://www.pluralsight.com/courses/building-data-centric-apps-angular-breezejs)

PS: я опубликую полное содержимое моего файла requirejs config.js, а также aurelia.json для сборки aurelia cli, посмотрите и обратите внимание на добавление, предварительную загрузку и прокладки.

//-------------------config.js----------------------------------------------
    require.config(
      {
        baseUrl: 'src',
        paths: {
    
          pipelines: 'resources/pipelines',
          templates: 'resources/templates',
          interceptors: 'resources/interceptors',
    
          bluebird: '../node_modules/bluebird/js/browser/bluebird.min',
          bootstrap: '../node_modules/bootstrap/dist/js/bootstrap.min',
    
          "aurelia-animator-css": '../node_modules/aurelia-animator-css/dist/amd/aurelia-animator-css',
          "aurelia-binding": '../node_modules/aurelia-binding/dist/amd/aurelia-binding',
          "aurelia-bootstrapper": '../node_modules/aurelia-bootstrapper/dist/amd/aurelia-bootstrapper',
          "aurelia-breeze": '../node_modules/aurelia-breeze/dist/amd/aurelia-breeze',
          "aurelia-computed": '../node_modules/aurelia-computed/dist/amd/aurelia-computed',
          "aurelia-dependency-injection": '../node_modules/aurelia-dependency-injection/dist/amd/aurelia-dependency-injection',
          "aurelia-event-aggregator": '../node_modules/aurelia-event-aggregator/dist/amd/aurelia-event-aggregator',
          "aurelia-fetch-client": '../node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client',
          "aurelia-framework": '../node_modules/aurelia-framework/dist/amd/aurelia-framework',
          "aurelia-history": '../node_modules/aurelia-history/dist/amd/aurelia-history',
          "aurelia-history-browser": '../node_modules/aurelia-history-browser/dist/amd/aurelia-history-browser',
          "aurelia-http-client": '../node_modules/aurelia-http-client/dist/amd/aurelia-http-client',
          "aurelia-loader": '../node_modules/aurelia-loader/dist/amd/aurelia-loader',
          "aurelia-loader-default": '../node_modules/aurelia-loader-default/dist/amd/aurelia-loader-default',
          "aurelia-logging": '../node_modules/aurelia-logging/dist/amd/aurelia-logging',
          "aurelia-logging-console": '../node_modules/aurelia-logging-console/dist/amd/aurelia-logging-console',
          "aurelia-metadata": '../node_modules/aurelia-metadata/dist/amd/aurelia-metadata',
          "aurelia-pal": '../node_modules/aurelia-pal/dist/amd/aurelia-pal',
          "aurelia-pal-browser": '../node_modules/aurelia-pal-browser/dist/amd/aurelia-pal-browser',
          "aurelia-path": '../node_modules/aurelia-path/dist/amd/aurelia-path',
          "aurelia-polyfills": '../node_modules/aurelia-polyfills/dist/amd/aurelia-polyfills',
          "aurelia-router": '../node_modules/aurelia-router/dist/amd/aurelia-router',
          "aurelia-route-recognizer": '../node_modules/aurelia-route-recognizer/dist/amd/aurelia-route-recognizer',
          "aurelia-task-queue": '../node_modules/aurelia-task-queue/dist/amd/aurelia-task-queue',
          "aurelia-templating": '../node_modules/aurelia-templating/dist/amd/aurelia-templating',
          "aurelia-templating-binding": '../node_modules/aurelia-templating-binding/dist/amd/aurelia-templating-binding',
    
          "breeze-client": '../node_modules/breeze-client/breeze.base.min',
          "breeze.modelLibrary": '../node_modules/breeze-client/breeze.modelLibrary.backingStore',
          "breeze.dataService": '../node_modules/breeze-client/breeze.dataService.webApi',
          "breeze.uriBuilder": '../node_modules/breeze-client/breeze.uriBuilder.json',
    
          jquery: '../node_modules/jquery/dist/jquery.min',
          lodash: '../node_modules/lodash/lodash.min',
          moment: '../node_modules/moment/min/moment-with-locales.min',
          numeral: '../node_modules/numeral/min/numeral.min',
          pouchdb: '../node_modules/pouchdb/dist/pouchdb.min',
          text: '../node_modules/text/text',
          toastr: '../node_modules/toastr/build/toastr.min',
    
          "jquery-ui": '../node_modules/jquery-ui/dist/jquery-ui.min'
    
        },
        packages: [
          {
            name: 'aurelia-dialog',
            location: '../node_modules/aurelia-dialog/dist/amd',
            main: 'aurelia-dialog'
          },
          {
            name: 'aurelia-templating-resources',
            location: '../node_modules/aurelia-templating-resources/dist/amd',
            main: 'aurelia-templating-resources'
          },
          {
            name: 'aurelia-templating-router',
            location: '../node_modules/aurelia-templating-router/dist/amd',
            main: 'aurelia-templating-router'
          },
          {
            name: 'aurelia-testing',
            location: '../node_modules/aurelia-testing/dist/amd',
            main: 'aurelia-testing'
          },
          {
            name: 'aurelia-validation',
            location: '../node_modules/aurelia-validation/dist/amd',
            main: 'aurelia-validation'
          },
          {
            name: 'popper.js',
            location: '../node_modules/popper.js/dist/umd/',
            main: 'popper.min'
          }
        ],
        shim: {
          'aurelia-breeze': {
            exports: 'BreezeObjectObserver',
            deps: ['breeze-client', 'breeze.modelLibrary', 'breeze.dataService', 'breeze.uriBuilder']
          },
          'breeze-client': {
            exports: 'breeze'
          },
          bootstrap: {
            exports: '$.fn.button',
            deps: ['jquery', 'popper.js']
          },
          jquery: {
            exports: '$'
          },
          "jquery-ui": {
            exports: '$.autocomplete',
            deps: ['jquery']
          },
          lodash: {
            exports: '_'
          },
          "popper.js": {
            exports: 'Popper'
          },
          toastr: {
            deps: ['jquery']
          }
    
        }
      });
    
    require(['aurelia-bootstrapper']);

//-------------------aurelia.json----------------------------------------------
    {
      "name": "mgame",
      "type": "project:application",
      "bundler": {
        "id": "cli",
        "displayName": "Aurelia-CLI"
      },
      "platform": {
        "id": "aspnetcore",
        "displayName": "ASP.NET Core",
        "index": "index.html",
        "baseDir": ".",
        "output": "dist"
      },
      "transpiler": {
        "id": "typescript",
        "displayName": "TypeScript",
        "fileExtension": ".ts",
        "dtsSource": [ "./custom_typings/**/*.d.ts" ],
        "source": "src/**/*.ts"
      },
      "markupProcessor": {
        "id": "maximum",
        "displayName": "Maximum Minification",
        "fileExtension": ".html",
        "source": "src/**/*.html"
      },
      "cssProcessor": {
        "id": "sass",
        "displayName": "Sass",
        "fileExtension": ".scss",
        "source": "src/**/*.scss"
      },
      "editor": {
        "id": "visualstudio",
        "displayName": "Visual Studio"
      },
      "testFramework": {
        "id": "jasmine",
        "displayName": "Jasmine"
      },
      "unitTestRunner": {
        "id": "karma",
        "displayName": "Karma",
        "source": "test/unit/**/*.ts"
      },
      "e2eTestRunner": {
        "id": "protractor",
        "displayName": "Protractor",
        "source": "test/e2e/src/**/*.ts",
        "dist": "test/e2e/dist/",
        "typingsSource": [ "node_modules//@types/**/*.d.ts", "custom_typings/**/*.d.ts" ]
      },
      "paths": {
        "root": "src",
        "resources": "resources",
        "elements": "resources/elements",
        "pipelines": "resources/pipelines",
        "templates": "resources/templates",
        "attributes": "resources/attributes",
        "interceptors": "resources/interceptors",
        "valueConverters": "resources/converters",
        "bindingBehaviors": "resources/behaviors",
        "assets": [
          {
            "src": "node_modules/jquery-ui/dist/images/*",
            "dest": "/../images"
          },
          {
            "src": "node_modules/font-awesome/css/font-awesome.min.css",
            "dest": "/css"
          },
          {
            "src": "node_modules/font-awesome/fonts/*",
            "dest": "/fonts"
          }
        ]
      },
      "build": {
        "targets": [
          {
            "id": "aspnetcore",
            "displayName": "ASP.NET Core",
            "index": "index.html",
            "baseDir": ".",
            "output": "dist"
          }
        ],
        "loader": {
          "type": "require",
          "configTarget": "vendor-bundle.js",
          "includeBundleMetadataInConfig": "auto",
          "plugins": [
            {
              "name": "text",
              "extensions": [
                ".html",
                ".css"
              ],
              "stub": true
            }
          ]
        },
        "options": {
          "minify": "stage & prod",
          "sourcemaps": "dev & stage"
        },
        "bundles": [
          {
            "name": "app-bundle.js",
            "source": [
              "[**/*.js]",
              "**/*.{css,html}"
            ]
          },
          {
            "name": "vendor-bundle.js",
            "prepend": [
              "node_modules/bluebird/js/browser/bluebird.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/requirejs/require.js"
            ],
            "dependencies": [
              "jquery",
              "lodash",
              "moment",
              "numeral",
              "text",
              {
                "name": "aurelia-animator-css",
                "path": "../node_modules/aurelia-animator-css/dist/amd",
                "main": "aurelia-animator-css"
              },
              {
                "name": "aurelia-binding",
                "path": "../node_modules/aurelia-binding/dist/amd",
                "main": "aurelia-binding"
              },
              {
                "name": "aurelia-bootstrapper",
                "path": "../node_modules/aurelia-bootstrapper/dist/amd",
                "main": "aurelia-bootstrapper"
              },
              {
                "name": "aurelia-breeze",
                "path": "../node_modules/aurelia-breeze/dist/amd",
                "main": "aurelia-breeze",
                "exports": "BreezeObjectObserver",
                "deps": [ "breeze-client", "breeze.modelLibrary", "breeze.dataService", "breeze.uriBuilder" ]
              },
              {
                "name": "aurelia-computed",
                "path": "../node_modules/aurelia-computed/dist/amd",
                "main": "aurelia-computed"
              },
              {
                "name": "aurelia-dependency-injection",
                "path": "../node_modules/aurelia-dependency-injection/dist/amd",
                "main": "aurelia-dependency-injection"
              },
              {
                "name": "aurelia-dialog",
                "path": "../node_modules/aurelia-dialog/dist/amd",
                "main": "aurelia-dialog"
              },
              {
                "name": "aurelia-event-aggregator",
                "path": "../node_modules/aurelia-event-aggregator/dist/amd",
                "main": "aurelia-event-aggregator"
              },
              {
                "name": "aurelia-fetch-client",
                "path": "../node_modules/aurelia-fetch-client/dist/amd",
                "main": "aurelia-fetch-client"
              },
              {
                "name": "aurelia-framework",
                "path": "../node_modules/aurelia-framework/dist/amd",
                "main": "aurelia-framework"
              },
              {
                "name": "aurelia-history",
                "path": "../node_modules/aurelia-history/dist/amd",
                "main": "aurelia-history"
              },
              {
                "name": "aurelia-history-browser",
                "path": "../node_modules/aurelia-history-browser/dist/amd",
                "main": "aurelia-history-browser"
              },
              {
                "name": "aurelia-http-client",
                "path": "../node_modules/aurelia-http-client/dist/amd",
                "main": "aurelia-http-client"
              },
              {
                "name": "aurelia-loader",
                "path": "../node_modules/aurelia-loader/dist/amd",
                "main": "aurelia-loader"
              },
              {
                "name": "aurelia-loader-default",
                "path": "../node_modules/aurelia-loader-default/dist/amd",
                "main": "aurelia-loader-default"
              },
              {
                "name": "aurelia-logging",
                "path": "../node_modules/aurelia-logging/dist/amd",
                "main": "aurelia-logging"
              },
              {
                "name": "aurelia-logging-console",
                "path": "../node_modules/aurelia-logging-console/dist/amd",
                "main": "aurelia-logging-console"
              },
              {
                "name": "aurelia-metadata",
                "path": "../node_modules/aurelia-metadata/dist/amd",
                "main": "aurelia-metadata"
              },
              {
                "name": "aurelia-pal",
                "path": "../node_modules/aurelia-pal/dist/amd",
                "main": "aurelia-pal"
              },
              {
                "name": "aurelia-pal-browser",
                "path": "../node_modules/aurelia-pal-browser/dist/amd",
                "main": "aurelia-pal-browser"
              },
              {
                "name": "aurelia-path",
                "path": "../node_modules/aurelia-path/dist/amd",
                "main": "aurelia-path"
              },
              {
                "name": "aurelia-polyfills",
                "path": "../node_modules/aurelia-polyfills/dist/amd",
                "main": "aurelia-polyfills"
              },
              {
                "name": "aurelia-router",
                "path": "../node_modules/aurelia-router/dist/amd",
                "main": "aurelia-router"
              },
              {
                "name": "aurelia-route-recognizer",
                "path": "../node_modules/aurelia-route-recognizer/dist/amd",
                "main": "aurelia-route-recognizer"
              },
              {
                "name": "aurelia-task-queue",
                "path": "../node_modules/aurelia-task-queue/dist/amd",
                "main": "aurelia-task-queue"
              },
              {
                "name": "aurelia-templating",
                "path": "../node_modules/aurelia-templating/dist/amd",
                "main": "aurelia-templating"
              },
              {
                "name": "aurelia-templating-binding",
                "path": "../node_modules/aurelia-templating-binding/dist/amd",
                "main": "aurelia-templating-binding"
              },
              {
                "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": "aurelia-validation",
                "path": "../node_modules/aurelia-validation/dist/amd",
                "main": "aurelia-validation"
              },
              {
                "name": "bluebird",
                "path": "../node_modules/bluebird/js/browser",
                "main": "bluebird.min"
              },
              {
                "name": "bootstrap",
                "path": "../node_modules/bootstrap/dist",
                "main": "js/bootstrap.min",
                "deps": [ "jquery", "popper.js" ],
                "exports": "$.fn.button",
                "resources": [
                  "css/bootstrap.min.css"
                ]
              },
              {
                "name": "breeze-client",
                "path": "../node_modules/breeze-client",
                "main": "breeze.base.min",
                "exports": "breeze"
              },
              {
                "name": "breeze.modelLibrary",
                "path": "../node_modules/breeze-client",
                "main": "breeze.modelLibrary.backingStore"
              },
              {
                "name": "breeze.dataService",
                "path": "../node_modules/breeze-client",
                "main": "breeze.dataService.webApi"
              },
              {
                "name": "breeze.uriBuilder",
                "path": "../node_modules/breeze-client",
                "main": "breeze.uriBuilder.json"
              },
              {
                "name": "jquery-ui",
                "path": "../node_modules/jquery-ui/dist",
                "main": "jquery-ui.min",
                "deps": [ "jquery" ],
                "exports": "$.autocomplete",
                "resources": [ "jquery-ui.min.css" ]
              },
              {
                "name": "popper.js",
                "path": "../node_modules/popper.js/dist/umd",
                "main": "popper.min",
                "exports": "Popper"
              },
              {
                "name": "pouchdb",
                "path": "../node_modules/pouchdb/dist",
                "main": "pouchdb.min"
              },
              {
                "name": "toastr",
                "path": "../node_modules/toastr",
                "main": "toastr",
                "deps": [ "jquery" ],
                "resources": [ "build/toastr.min.css" ]
              }
            ]
          }
        ]
      }
    }
03.01.2018
Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


Для любых предложений по сайту: [email protected]