如何在 aurelia 中使用微风？

【问题标题】：How to use breeze in aurelia?如何在 aurelia 中使用微风？
【发布时间】：2016-11-22 07:49:47
【问题描述】：

我是 aurelia 的新手，我使用skeleton-typescript-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 文件在第一行出现了另一个错误，找不到模块 'breeze -客户端'：

import breeze from 'breeze-client';

我检查了 nmp 文件夹（wwwroot/nmp），aurelia-breeze 和breeze-client 都在那里，在package.json 中也一样。

我将 aurelia-breeze.d.ts 与 typings 文件夹下的其他 d.ts 文件进行了比较， 这些文件都带有名为 index.d.ts 的骨架，并带有用于声明的 typings.json。

所以我想这个错误应该是由typings配置引起的，我google了很久，但没有答案，你能告诉我如何让它工作吗？提前致谢。

【问题讨论】：

    标签： breeze aurelia


    【解决方案1】：

    我没有在我的 Aurelia 应用程序中使用 TypeScript，但我在集成微风时遇到了同样的问题。最后，我通过将其添加为一个简单的脚本而不是从 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();
            });             
        });                     
    });    
}

    希望这会有所帮助。就我而言，我什至在微风本身加载后集成了微风的微风.savequeuing 插件。不过可能有更好的方法来做到这一点。

    还要注意我使用“require”作为模块加载器。我使用 Aurelia CLI，所以我在“build”下的 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"
        ],
 ...
}

    【讨论】：

      【解决方案2】：

      要在 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'
      }

      （requirejs 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'http://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 上的 Brian Noyes 优秀课程）

      PS：我将发布我的 requirejs config.js 文件的全部内容以及 aurelia cli 构建的 aurelia.json，查看并注意 prepends、preload 和 shims。

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

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-07-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-07-28
        • 2013-09-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode