Aurelia：如何使用 npm 包中的视图/视图模型？

Question

We are using Aurelia for our application's frontend. As we will have several different projects based on it, I would like to be able to add all of our custom code to some npm packages that could be added by the developers. This would allow us to create a new empty project, add the dependencies to our reusable code without including it in the project's code base (so it can be updated separately if needed).

For instance, I would like a tools package and a service package. This is of course quite easy.

But I can't figure out how to use a 'ui' package that would contain all our custom reusable components. Is that even possible? How would I require a component in an html template?

If this can't be done, does anyone have an idea of how to cleanly separate the reusable code from the application specific code?

thanks a lot!

Answer 1

of course you can, that's what a lot of the plugins available for aurelia doing. One way is to register your components as global resources (in your package or plugin) and import them in your client app, CLI example:

// from your plugin
aureliaConfig.globalResources([
    './jqm-loader',
    './jqm-page',
    './jqm-footer',
    './jqm-header'
]);

then import them in your app:

// aurelia.json
{
    "name": "my-reusable-widgets",
    "path": "../node_modules/my-reusable-widgets",
    "main": "index",
    "resources": [
          "**/*.{css,html}" //to load them all or you can add individual files
     ]
}

then use your widgets:

<jqm-loader></jqm-loader>
...

if you don't want to use globalResources you can also use require:

<require from="my-reusable-widgets/jqm-header"></require>
<jqm-header></jqm-header>