我已经构建了一个没有后端的简单aurelia网页,现在我有兴趣投入生产.我使用Aurelia-cli进行捆绑,希望这很简单,但我不知道如何继续.我应该将哪些文件上传到服务器以使该网站正常工作？谢谢您的帮助.
我在使用requirejs和使用TypeScript的Aurelia CLI应用程序(v0.31.1)中配置Bootstrap 4 beta时遇到问题.尝试了几个配置变化后,我继续收到以下控制台错误:
未捕获的错误:Bootstrap下拉列表需要Popper.js
以下是重现的步骤.首先,安装包:
$ npm install --save jquery bootstrap@4.0.0-beta popper.js
接下来,我配置了aurelia.json:
"jquery",
{
"name": "popper.js",
"path": "../node_modules/popper.js/dist/umd",
"main": "popper"
},
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [
"jquery",
"popper.js"
],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
请注意上面的配置中:
最后,在我的app.ts中:
import 'bootstrap';
使用此配置,使用构建au build工作正常.但运行时,使用au run --watch我得到以下控制台错误:
未捕获的错误:引导下拉需要Popper.js(https://popper.js.org)(defaults.js:19)
未捕获的错误:引导下拉需要Popper.js(https://popper.js.org)(引导. min.js:6)
...再进一步:
未捕获TypeError:plugin.load不是Module的函数.(defaults.js:19)
不幸的是,Bootstrap 4文档只提到了webpack上的说明.搜索Aurelia的Gitter.im频道和StackOverflow也是如此.我找不到关于Aurelia CLI和Require.js的样本.最后,Google点击仅显示嵌入alpha版本的示例(依赖于'tethering'而不是'popper').
关于SO的类似问题,它们有相同的错误,但不适用于我的情况:
我正在尝试在我的Aurelia CLI项目中包含Bootstrap,并且CSS和JS工作正常.
我唯一的问题是glyphicons需要加载字体文件.
我用这个配置:
"dependencies": [
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.min.css",
"fonts/glyphicons-halflings-regular.woff2"
]
}
]
但是我收到包含这一行的错误:
路径:'C:\ Users\randy\Documents\form \node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.js'
因此即使我包含该.woff2文件,Aurelia 也会尝试将该文件作为JS文件导入.我能做些什么来完成这项工作？CSS确实很好用.
我试图让Aurelia中的Amazon Cognito Identity SDK正常工作.我没有很多Javascript经验,并且对各种依赖系统非常不熟悉.
我使用以下方法安装了Cognito SDK: npm install --save amazon-cognito-identity-js
然后,我aurelia_project/aurelia.json按照Aurelia文档中的建议编辑了我的文件,以在build.bundles供应商捆绑依赖项中包含一个新的客户端库依赖项:
"sjcl",
"jsbn",
{
"name": "aws-sdk",
"path": "../node_modules/aws-sdk/",
"main": "dist/aws-sdk"
},
{
"name": "amazon-cognito-identity-js",
"path": "../node_modules/amazon-cognito-identity-js/dist",
"main": "amazon-cognito-identity.min"
}
但是,当我尝试使用au run我运行代码时,我得到错误:Error: ENOENT: no such file or directory, open '/Users/nathanskone/Projects/scc/aurelia-app/src/xmlbuilder.js'
我试图在我的aurelia.json中包含xmlbuilder无济于事.当它被包括在内我最终得到关于lodash的这个错误:Error: ENOENT: no such file or directory, open '/Users/nathanskone/Projects/scc/aurelia-app/src/lodash/object/assign.js'
我还没有找到任何方法来解决lodash错误.
是否有人熟悉Aurelia依赖系统可以提供帮助？
谢谢,内森
编辑#2:当我遇到xmlbuilder/lodash错误时,我在尝试捆绑aws-sdk时遇到了进一步的错误.这是我目前的aurelia.json:
"dependencies": [
{
"name": "xmlbuilder",
"path": "../node_modules/xmlbuilder/lib",
"main": "index"
},
{
"name": "aws-sdk",
"path": "../node_modules/aws-sdk",
"main": "index",
"resources": ["lib/region_config.json"]
},
而我目前得到的错误: …
我似乎无法让这些工作在一起.我正在使用Aurelia CLI并以类似的方式为其他库成功完成(如select2,spin,moment和numbers).我似乎无法工作.这是我到目前为止所拥有的.
首先,我跑npm install toastr --save和typings install dt~toastr --global --save
在aurelia.json,在vendor-bundle.js部分中,我添加了一个依赖项:
"jquery",
{
"name": "toastr",
"path": "../node_modules/toastr/build",
"main": "toastr.min",
"resources": [
"toastr.min.css"
],
"deps": ["jquery"]
}
更新:重现的完整步骤
我安装了这些工具的这些版本:node(6.3.0),npm(3.10.3),au(0.17.0)
打开命令提示符并键入:
au new au-toastr
3 (Custom)
2 (Typescript)
3 (Sass)
1 (configure unit testing)
1 (Visual Studio Code)
1 (create project)
1 (install project dependencies)
cd au-toastr
npm install jquery --save
npm install toastr --save
typings install dt~jquery --global --save
typings install dt~toastr --global --save
然后aurelia.json …
我有一个包含6个视图(html)的项目.每个视图都有一个对应的视图模型(.js)和一个仅适用于该视图的样式表(.css)
aurelia-cli可以很好地通过我的文件递归递归并将所有.js和.css文件捆绑到几个文件中,以便在减少页面加载时间和大小的同时引用它们.因此,如果我有一个带welcome.html,welcome.js和welcome.css的欢迎文件夹,我可以使用以下内容加载welcome.html的CSS,<require from="./welcome.css"></require>并<head></head>在页面加载时将CSS注入到标记中.
问题是当我导航到下一个视图时,来自welcome.html/welcome.css的CSS规则仍然在<head>网页的标记内,因此仍然被强制执行.在我的应用程序中访问了所有6个视图后,我现在在<style>标记中有6个标记<head>,所有六个页面中的所有规则都在我去的每个页面上强制执行,直到刷新页面为止没有卸载.毋庸置疑,在访问了几页后,整个网站变得混乱垃圾.
所以我的问题是
如果我有一个10页的应用程序,其中包含全局样式表,bootstrap,动画css和字体真棒,那么在一天结束时,我会将14个冲突的样式永久注入到html中,其余的应用程序将被注入.
有什么建议？
javascript aurelia aurelia-binding aurelia-cli aurelia-bundling
我正在尝试学习Aurelia我已经设法使用aurelia-cli来设置一个基本的应用程序,我现在正在尝试构建一个自定义组件.我有Aurelia的印象,我可以设置这样的结构:
> /app_folder
> -- /src
> ---- app.html (root component view)
> ---- app.js (root component view-model)
> ---- /components
> ------ /my-component
> -------- my-component.html (custom component view)
> -------- my-component.js (custom component view-model)
在app.js中,我设法使用<require>视图中的标记加载我的组件:
<require from = "./components/my-component/my-component.html"></require>
然后将该标记添加到视图中:
<my-component />
这完全符合我的预期,但该组件似乎忽略了视图模型.
目前我的组件视图如下所示:
<template>
<h1>${header}</h1>
<span>Non-dynamic data for testing</span>
</template>
它的视图模型看起来像这样:
export class MyComponent {
constructor() {
this.header = 'Service started!';
}
}
当我运行我的应用程序时,我看到的是带有非动态数据的跨度.控制台的HTML输出如下所示:
<my-component class="au-target" au-target-id="3">
<h1></h1>
<span>Non-dynamic data for testing</span>
</my-component>
有人可以告诉我哪里出错了吗？
我是Aurelia的新手,所以如果这是一个显而易见的问题,或者甚至是不应该考虑的事情,请对我保持温和.通过阅读网络上的文档和各种资源,这似乎无法在任何地方解决.
随着我的项目规模的增加,我重新构建了文件夹和文件.虽然重构它感觉有点麻烦,但是检查路径的正确深度,以及当我移动视图模型时我也需要更改导入路径.
目前我需要在视图模型中导入某些文件:
import {log} from './../../services/log';
我觉得更舒服的是从项目的根开始有一个相对路径,如:
import {log} from 'services/log';
有什么我想念或根本不理解？我知道使用./指定当前文件的相对路径.
更新:
我尝试了与Aurelia Contact Manager Tutorial相同的内容,其中src文件夹中的所有文件都在同一级别.如果我将'wep-api.ts'文件移动到'src/services'文件夹中并想从'src/components/users'中的viewmodel导入该文件,我需要使用import作为
import {WebAPI} from './../../services/web-api';
它似乎只适用于'services/web-api'而且错误是
[ts] cannot find module 'services/web-api'
aurelia.json文件包括
"paths": {
"root": "src", ...
我创建了一个新的Aurelia插件,它被命名Aurelia-Slickgrid并在本地工作.feature('resources').然后我准备好进行下一步,将它作为一个插件提供给每个人,并创建一个Github项目,并在这个GitHub链接下提供它- Aurelia-Slickgrid.我使用Aurelia Skeleton Plugin来创建我的插件,也运行gulp build以创建转换后的输出.然后我发布它NPM并成功安装它npm i --save aurelia-slickgrid.我目前正在使用Aurelia-CLI捆绑,一切顺利,直到我打开浏览器并看到控制台中出现错误(现在我在浏览器中留下了白页):
Uncaught TypeError: plugin.load is not a function
at Module.<anonymous> (vendor-bundle.js:5308)
...
目前,我正在尝试将其作为插件加载Aurelia-CLI.请参阅下面的完整配置:
index.js 插件
import {AureliaSlickgrid} from './aurelia-slickgrid';
import {SlickPager} from './slick-pager';
import {SlickWindowResizer} from './slick-window-resizer';
export function configure(config) {
config.globalResources('./aurelia-slickgrid');
config.globalResources('./slick-pager');
config.globalResources('./slick-window-resizer');
}
export {
AureliaSlickgrid,
SlickPager,
SlickWindowResizer
}
main.js (我当地的项目)
aurelia.use
.standardConfiguration()
.feature('resources')
.plugin('aurelia-slickgrid');
aurelia.json (我当地的项目)
{
"name": …我们正在使用aurelia-cli.任务包括:
build.json
build.ts
process-css.ts
process-markup.ts
process-sass.ts
run.json
run.ts
test.json
test.ts
transpile.ts
如果我们用cli做一个缓存破坏解决方案呢？
我们已经尝试将递增的数字scripts目录,因此,它去scripts1,scripts2,scriptsN.