在奥里利亚创建功能

Question

我尝试biuld没有完整的文档的旁边奥里利亚插件，我读太多的doc和插件IM构建一个简单的插件，它包含一个简单的日期选择器：

首先我创建以下文件系统：

./Aurelia 
    -JbPlugin 
     -JbDirectives 
      +index.js 
      +jb-calendar.js 

和main.js文件我功能添加它象下面这样：

aurelia.use 
 
     .standardConfiguration() 
 
     .developmentLogging() 
 
     .feature('jb-directive');

后，在插件的index.js文件我有：

import {ViewLocator , inject} from 'aurelia-framework'; 
 
import {JbCalendar} from './jb-calendar'; 
 

 
export function configure(config) { 
 
    config.globalResources([ 
 
      './jb-calendar'] 
 
    ); 
 
} 
 

 
export { 
 
    JbCalendar, 
 
};

在JB-calendar.js

：

import {inject, bindable, bindingMode, BindingEngine} from 'aurelia-framework'; 
 

 
@inject(BindingEngine) 
 
export class JbCalendar { 
 
}

在我的config.js文件：

System.config({ 
 
    baseURL: "/", 
 
    defaultJSExtensions: true, 
 
    transpiler: "babel", 
 
    babelOptions: { 
 
    "optional": [ 
 
     "runtime", 
 
     "optimisation.modules.system", 
 
     "es7.decorators", 
 
     "es7.classProperties" 
 
    ] 
 
    }, 
 
    paths: { 
 
    "github:*": "jspm_packages/github/*", 
 
    "npm:*": "jspm_packages/npm/*", 
 
    "jb-plugin:*":"Aurelia/JbPlugin/*" 
 
    }, 
 
    stage: 0, 
 

 
    map: { 
 
    "jb-directive": "jb-plugin:jb-directive", 
 
    "aurelia-animator-css": "npm:aurelia-animator-css@1.0.1", 
 
    "aurelia-bootstrapper": "npm:aurelia-bootstrapper@2.0.1", 
 
    "aurelia-fetch-client": "npm:aurelia-fetch-client@1.1.0", 
 
    "aurelia-framework": "npm:aurelia-framework@1.0.8", 
 
    "aurelia-http-client": "npm:aurelia-http-client@1.0.4", 
 
    "aurelia-pal-browser": "npm:aurelia-pal-browser@1.1.0", 
 
    "aurelia-router": "npm:aurelia-router@1.1.1", 
 
    "babel": "npm:babel-core@5.8.38", 
 
    "babel-polyfill": "npm:babel-polyfill@6.23.0", 
 
    "babel-runtime": "npm:babel-runtime@5.8.38", 
 
    "core-js": "npm:core-js@1.2.7", 
 
    "jquery": "npm:jquery@3.1.1", 
 
    "github:jspm/nodelibs-assert@0.1.0": { 
 
     "assert": "npm:assert@1.4.1" 
 
    }, 
 
    "github:jspm/nodelibs-buffer@0.1.0": { 
 
     "buffer": "npm:buffer@3.6.0" 
 
    }, 
 
    "github:jspm/nodelibs-path@0.1.0": { 
 
     "path-browserify": "npm:path-browserify@0.0.0" 
 
    }, 
 
    "github:jspm/nodelibs-process@0.1.2": { 
 
     "process": "npm:process@0.11.9" 
 
    }, 
 
    "github:jspm/nodelibs-util@0.1.0": { 
 
     "util": "npm:util@0.10.3" 
 
    }, 
 
    "github:jspm/nodelibs-vm@0.1.0": { 
 
     "vm-browserify": "npm:vm-browserify@0.0.4" 
 
    }, 
 
    "npm:assert@1.4.1": { 
 
     "assert": "github:jspm/nodelibs-assert@0.1.0", 
 
     "buffer": "github:jspm/nodelibs-buffer@0.1.0", 
 
     "process": "github:jspm/nodelibs-process@0.1.2", 
 
     "util": "npm:util@0.10.3" 
 
    }, 
 
    "npm:aurelia-animator-css@1.0.1": { 
 
     "aurelia-metadata": "npm:aurelia-metadata@1.0.3", 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0", 
 
     "aurelia-templating": "npm:aurelia-templating@1.2.0" 
 
    }, 
 
    "npm:aurelia-binding@1.1.1": { 
 
     "aurelia-logging": "npm:aurelia-logging@1.2.0", 
 
     "aurelia-metadata": "npm:aurelia-metadata@1.0.3", 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0", 
 
     "aurelia-task-queue": "npm:aurelia-task-queue@1.1.0" 
 
    }, 
 
    "npm:aurelia-bootstrapper@2.0.1": { 
 
     "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.1", 
 
     "aurelia-framework": "npm:aurelia-framework@1.0.8", 
 
     "aurelia-history": "npm:aurelia-history@1.0.0", 
 
     "aurelia-history-browser": "npm:aurelia-history-browser@1.0.0", 
 
     "aurelia-loader-default": "npm:aurelia-loader-default@1.0.0", 
 
     "aurelia-logging-console": "npm:aurelia-logging-console@1.0.0", 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0", 
 
     "aurelia-pal-browser": "npm:aurelia-pal-browser@1.1.0", 
 
     "aurelia-polyfills": "npm:aurelia-polyfills@1.1.1", 
 
     "aurelia-router": "npm:aurelia-router@1.1.1", 
 
     "aurelia-templating": "npm:aurelia-templating@1.2.0", 
 
     "aurelia-templating-binding": "npm:aurelia-templating-binding@1.2.0", 
 
     "aurelia-templating-resources": "npm:aurelia-templating-resources@1.2.0", 
 
     "aurelia-templating-router": "npm:aurelia-templating-router@1.0.1" 
 
    }, 
 
    "npm:aurelia-dependency-injection@1.3.0": { 
 
     "aurelia-metadata": "npm:aurelia-metadata@1.0.3", 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0" 
 
    }, 
 
    "npm:aurelia-event-aggregator@1.0.1": { 
 
     "aurelia-logging": "npm:aurelia-logging@1.2.0" 
 
    }, 
 
    "npm:aurelia-framework@1.0.8": { 
 
     "aurelia-binding": "npm:aurelia-binding@1.1.1", 
 
     "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0", 
 
     "aurelia-loader": "npm:aurelia-loader@1.0.0", 
 
     "aurelia-logging": "npm:aurelia-logging@1.2.0", 
 
     "aurelia-metadata": "npm:aurelia-metadata@1.0.3", 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0", 
 
     "aurelia-path": "npm:aurelia-path@1.1.1", 
 
     "aurelia-task-queue": "npm:aurelia-task-queue@1.1.0", 
 
     "aurelia-templating": "npm:aurelia-templating@1.2.0" 
 
    }, 
 
    "npm:aurelia-history-browser@1.0.0": { 
 
     "aurelia-history": "npm:aurelia-history@1.0.0", 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0" 
 
    }, 
 
    "npm:aurelia-http-client@1.0.4": { 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0", 
 
     "aurelia-path": "npm:aurelia-path@1.1.1" 
 
    }, 
 
    "npm:aurelia-loader-default@1.0.0": { 
 
     "aurelia-loader": "npm:aurelia-loader@1.0.0", 
 
     "aurelia-metadata": "npm:aurelia-metadata@1.0.3", 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0" 
 
    }, 
 
    "npm:aurelia-loader@1.0.0": { 
 
     "aurelia-metadata": "npm:aurelia-metadata@1.0.3", 
 
     "aurelia-path": "npm:aurelia-path@1.1.1" 
 
    }, 
 
    "npm:aurelia-logging-console@1.0.0": { 
 
     "aurelia-logging": "npm:aurelia-logging@1.2.0" 
 
    }, 
 
    "npm:aurelia-metadata@1.0.3": { 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0" 
 
    }, 
 
    "npm:aurelia-pal-browser@1.1.0": { 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0" 
 
    }, 
 
    "npm:aurelia-polyfills@1.1.1": { 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0" 
 
    }, 
 
    "npm:aurelia-route-recognizer@1.1.0": { 
 
     "aurelia-path": "npm:aurelia-path@1.1.1" 
 
    }, 
 
    "npm:aurelia-router@1.1.1": { 
 
     "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0", 
 
     "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.1", 
 
     "aurelia-history": "npm:aurelia-history@1.0.0", 
 
     "aurelia-logging": "npm:aurelia-logging@1.2.0", 
 
     "aurelia-path": "npm:aurelia-path@1.1.1", 
 
     "aurelia-route-recognizer": "npm:aurelia-route-recognizer@1.1.0" 
 
    }, 
 
    "npm:aurelia-task-queue@1.1.0": { 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0" 
 
    }, 
 
    "npm:aurelia-templating-binding@1.2.0": { 
 
     "aurelia-binding": "npm:aurelia-binding@1.1.1", 
 
     "aurelia-logging": "npm:aurelia-logging@1.2.0", 
 
     "aurelia-templating": "npm:aurelia-templating@1.2.0" 
 
    }, 
 
    "npm:aurelia-templating-resources@1.2.0": { 
 
     "aurelia-binding": "npm:aurelia-binding@1.1.1", 
 
     "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0", 
 
     "aurelia-loader": "npm:aurelia-loader@1.0.0", 
 
     "aurelia-logging": "npm:aurelia-logging@1.2.0", 
 
     "aurelia-metadata": "npm:aurelia-metadata@1.0.3", 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0", 
 
     "aurelia-path": "npm:aurelia-path@1.1.1", 
 
     "aurelia-task-queue": "npm:aurelia-task-queue@1.1.0", 
 
     "aurelia-templating": "npm:aurelia-templating@1.2.0" 
 
    }, 
 
    "npm:aurelia-templating-router@1.0.1": { 
 
     "aurelia-binding": "npm:aurelia-binding@1.1.1", 
 
     "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0", 
 
     "aurelia-logging": "npm:aurelia-logging@1.2.0", 
 
     "aurelia-metadata": "npm:aurelia-metadata@1.0.3", 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0", 
 
     "aurelia-path": "npm:aurelia-path@1.1.1", 
 
     "aurelia-router": "npm:aurelia-router@1.1.1", 
 
     "aurelia-templating": "npm:aurelia-templating@1.2.0" 
 
    }, 
 
    "npm:aurelia-templating@1.2.0": { 
 
     "aurelia-binding": "npm:aurelia-binding@1.1.1", 
 
     "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0", 
 
     "aurelia-loader": "npm:aurelia-loader@1.0.0", 
 
     "aurelia-logging": "npm:aurelia-logging@1.2.0", 
 
     "aurelia-metadata": "npm:aurelia-metadata@1.0.3", 
 
     "aurelia-pal": "npm:aurelia-pal@1.2.0", 
 
     "aurelia-path": "npm:aurelia-path@1.1.1", 
 
     "aurelia-task-queue": "npm:aurelia-task-queue@1.1.0" 
 
    }, 
 
    "npm:babel-polyfill@6.23.0": { 
 
     "babel-runtime": "npm:babel-runtime@6.23.0", 
 
     "core-js": "npm:core-js@2.4.1", 
 
     "fs": "github:jspm/nodelibs-fs@0.1.2", 
 
     "path": "github:jspm/nodelibs-path@0.1.0", 
 
     "process": "github:jspm/nodelibs-process@0.1.2", 
 
     "regenerator-runtime": "npm:regenerator-runtime@0.10.3" 
 
    }, 
 
    "npm:babel-runtime@5.8.38": { 
 
     "process": "github:jspm/nodelibs-process@0.1.2" 
 
    }, 
 
    "npm:babel-runtime@6.23.0": { 
 
     "core-js": "npm:core-js@2.4.1", 
 
     "regenerator-runtime": "npm:regenerator-runtime@0.10.3" 
 
    }, 
 
    "npm:buffer@3.6.0": { 
 
     "base64-js": "npm:base64-js@0.0.8", 
 
     "child_process": "github:jspm/nodelibs-child_process@0.1.0", 
 
     "fs": "github:jspm/nodelibs-fs@0.1.2", 
 
     "ieee754": "npm:ieee754@1.1.8", 
 
     "isarray": "npm:isarray@1.0.0", 
 
     "process": "github:jspm/nodelibs-process@0.1.2" 
 
    }, 
 
    "npm:core-js@1.2.7": { 
 
     "fs": "github:jspm/nodelibs-fs@0.1.2", 
 
     "path": "github:jspm/nodelibs-path@0.1.0", 
 
     "process": "github:jspm/nodelibs-process@0.1.2", 
 
     "systemjs-json": "github:systemjs/plugin-json@0.1.2" 
 
    }, 
 
    "npm:core-js@2.4.1": { 
 
     "fs": "github:jspm/nodelibs-fs@0.1.2", 
 
     "path": "github:jspm/nodelibs-path@0.1.0", 
 
     "process": "github:jspm/nodelibs-process@0.1.2", 
 
     "systemjs-json": "github:systemjs/plugin-json@0.1.2" 
 
    }, 
 
    "npm:inherits@2.0.1": { 
 
     "util": "github:jspm/nodelibs-util@0.1.0" 
 
    }, 
 
    "npm:path-browserify@0.0.0": { 
 
     "process": "github:jspm/nodelibs-process@0.1.2" 
 
    }, 
 
    "npm:process@0.11.9": { 
 
     "assert": "github:jspm/nodelibs-assert@0.1.0", 
 
     "fs": "github:jspm/nodelibs-fs@0.1.2", 
 
     "vm": "github:jspm/nodelibs-vm@0.1.0" 
 
    }, 
 
    "npm:regenerator-runtime@0.10.3": { 
 
     "path": "github:jspm/nodelibs-path@0.1.0", 
 
     "process": "github:jspm/nodelibs-process@0.1.2" 
 
    }, 
 
    "npm:util@0.10.3": { 
 
     "inherits": "npm:inherits@2.0.1", 
 
     "process": "github:jspm/nodelibs-process@0.1.2" 
 
    }, 
 
    "npm:vm-browserify@0.0.4": { 
 
     "indexof": "npm:indexof@0.0.1" 
 
    } 
 
    } 
 
});

中的package.json文件

我有：

{ 
 
    "jspm": { 
 
    "main": "index", 
 
    "format": "amd", 
 
    "dependencies": { 
 
     "aurelia-animator-css": "npm:aurelia-animator-css@^1.0.1", 
 
     "aurelia-bootstrapper": "npm:aurelia-bootstrapper@^2.0.1", 
 
     "aurelia-fetch-client": "npm:aurelia-fetch-client@^1.1.0", 
 
     "aurelia-framework": "npm:aurelia-framework@^1.0.8", 
 
     "aurelia-http-client": "npm:aurelia-http-client@^1.0.4", 
 
     "aurelia-pal-browser": "npm:aurelia-pal-browser@^1.1.0", 
 
     "aurelia-router": "npm:aurelia-router@^1.1.1", 
 
     "babel-polyfill": "npm:babel-polyfill@^6.23.0", 
 
     "jquery": "npm:jquery@^3.1.1", 
 
     "jb-directive": "jb-plugin:jb-directive" 
 
    }, 
 
    "devDependencies": { 
 
     "babel": "npm:babel-core@^5.8.24", 
 
     "babel-runtime": "npm:babel-runtime@^5.8.24", 
 
     "core-js": "npm:core-js@^1.1.4" 
 
    } 
 
    } 
 
}

所以它没有任何错误很好地工作，并加载所有的JS，但是当我想使用像仪表板js这样的真实课程插件如下：

import {JbCalendar} from 'jb-directive'; 

它抛出一个错误对我说：

GET http://localhost:9001/Aurelia/JbPlugin/jb-directive.js 404 (Not Found) 

为什么奥里利亚航线插件像顶部犯规它soppose加载index.js文件？

编辑： 我findout我的插件是做工精细什么，我需要的只是用指令没有任何同类“进口”监守我在全球资源加我的指令，它可以反正在应用程序中使用，而不进口

Answer 1

试试这个

aurelia.use 
    .standardConfiguration() 
    .developmentLogging() 
    .plugin('JbPlguins/JbDirectives');