Aurelia를 사용하여 성공적인 응용 프로그램을 실행하고 있지만, Aurelia에서 제공하는 Vscode와 skeleton을 사용하여 응용 프로그램을 개발했습니다. CLI를 사용할 수있게되었으므로 응용 프로그램을 VS2015/Asp.net 핵심 프로젝트로 이식하려고했지만 몇 가지 어려움이 있습니다.내 Aurelia 응용 프로그램 내에서 패키지를 가져 오는 방법
VSCode 프로젝트에는 Gulp가 컴파일하는 데 사용하는 bundles.js 파일이 있습니다 (이해할 수있는대로). 이 파일에는 "dist/aurelia"섹션이 있습니다. 여기서 가져올 추가 패키지를 모두 넣으면 css 및 js 파일을 가져옵니다. 다음과 같습니다 : 내가 VS2015에서 새 프로젝트를 만들 명령 au new --here을 사용할 때
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"fetch",
"jquery",
"rstacruz/nprogress",
"moment",
"systemjs/plugin-text/*.js",
"components/jqueryui",
"quilljs",
"rich-text",
"util",
"signalr"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
것은 그러나, 생성 된 프로젝트는 조금 다른 보인다. 나는 aurelia_project 폴더를 가지고 있으며, 그 안에는 모든 빌드/컴파일이 일어나는 것처럼 보입니다. 그 폴더에는 aurelia.json 파일이 있는데, 그 패키지는 (NPM btw를 사용하고 있습니다.) 모든 패키지를 넣어야합니다. 이 패키지를 가져 오려고하면 파일 경로에 .js가 자동으로 추가되고 CSS가 완전히 없어져서 페이지가로드 될 때 CSS가로드되지 않습니다. 여기에 aurelia.json의 모습입니다 :
"dependencies": [
"aurelia-binding",
"aurelia-bootstrapper",
"aurelia-dependency-injection",
"aurelia-event-aggregator",
"aurelia-framework",
"aurelia-history",
"aurelia-history-browser",
"aurelia-loader",
"aurelia-loader-default",
"aurelia-logging",
"aurelia-logging-console",
"aurelia-metadata",
"aurelia-pal",
"aurelia-pal-browser",
"aurelia-path",
"aurelia-polyfills",
"aurelia-route-recognizer",
"aurelia-router",
"aurelia-task-queue",
"aurelia-templating",
"aurelia-templating-binding",
{
"name": "text",
"path": "../wwwroot\\scripts/text"
},
{
"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": "jquery",
"path": "../node_modules/jquery/dist/jquery.min"
},
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist/js/",
"main": "bootstrap"
}
]
}
그래서, 내 VSCode 프로젝트 해요, 내가 필요로 태그를 통해 HTML 페이지에 부트 스트랩 CSS를 가져옵니다. 그것은 여전히 일을하는 적절한 방법입니까? 그렇다면이 가져 오는 문제를 어떻게 수정합니까?
편집
는 대답은 아래 조금 더 얻을 수있었습니다. 이제는 프로젝트가 빌드되고 오류없이 실행되지만 부트 스트랩 CSS를 올바르게 가져올 수 없습니다.
{
"name": "aurelia-testing",
"path": "../node_modules/aurelia-testing/dist/amd",
"main": "aurelia-testing",
"env": "dev"
},
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist/js",
"main": "bootstrap",
"resources": [
"../css/*.css"
]
}
그래서이 부트 스트랩 패키지에 CSS 파일을 추가 :
여기에 나의 새로운 aurelia.json 파일의 조각입니다. 자, 내 타이프 스크립트 파일에서 import 'jquery'과 import 'bootstrap'을 호출하고 있는데, 아직 CSS를 얻지 못했습니다. 이 문제를 해결하는 방법을 모릅니다.
도움이됩니다. 이제 aurelia.json 파일에서 js와 css를 컴파일하고 오류없이 페이지를로드합니다. 그러나 나는 여전히 CSS를 필요로하는 데 어려움을 겪고있다. "../node_modules/bootstrap/dist/js"경로와 "../css/*.css"리소스를 사용하여 부트 스트랩 종속성을 추가하고 있습니다. 내 view-model에서 'jquery 가져 오기'및 'import bootstrap'이 있는데 CSS를 가져 오지 않는 것 같습니다. 'import bootstrap'은 css와 js 파일을 모두 가져와야합니다. 맞습니까? – James
아니요 아니요 아니요. 나는 SystemJS가 어떤 의존성을 탐지하고 모듈 구성에 따라 자동으로로드 할 수 있다고 말했다. CLI (귀하의 경우에는 RequireJS)를 사용하는 경우 모든 CSS 파일을 가져와야합니다 –
나는 그것을 수행했다고 믿습니다. 편집 된 질문을 확인하십시오. 수정 된 aurelia.json 파일의 일부 스 니펫을 게시했습니다. – James