[英]mvc bundling and relative css image when website is deployed to an application
[英]Aurelia bundling fails when using relative import path
我正在使用aurelia與typescript,我想避免使用相對導入路徑,如:
import { DialogBox } from '../../resources/elements/dialog-box';
反而
import { DialogBox } from 'resources/elements/dialog-box';
我修改了tsconfig.json所以編譯器中加入的baseUrl和路徑這樣的處理相對路徑:
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "amd",
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"lib": ["es2015", "dom"],
"baseUrl": ".",
"paths": {
"*":["src/*"]
}
} ...
但是當我運行cli的命令'au run --watch'時,我可以看到所有步驟都正常工作,而writeBundle步驟在跟蹤某些文件時失敗:
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'configureEnvironment'...
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'processCSS'
Finished 'processMarkup'
Finished 'buildTypeScript'
Starting 'writeBundles'...
該過程失敗,並出現以下錯誤:
Tracing resources/elements/dialog-box...
{ uid: 11,
name: 'writeBundles',
branch: false,
error:
{ [Error: ENOENT: no such file or directory, open 'C:\...\src\resources\elements\dialog-box.js']
errno: -4058,
奇怪的是:有其他文件使用非相對路徑引用,並且捆綁器不會失敗。
另一個奇怪的事情是:如果我使用觀察者離開相對路徑和捆綁,一切正常。 然后,如果我從有問題的導入中刪除相對'../../' ,我會得到一個捆綁警告,但無論如何一切都有效......
知道我可能做錯了什么嗎?
編輯修改:
我只是說明為什么有些文件似乎捆綁在一起而有些文件卻沒有。 我注意到所有具有“root-relative”導入但未失敗的文件實際上是從具有相對路徑的其他文件導入的。 所以我想捆綁者會從那里找到它們。 這解決了一件事,但基本問題仍然存在:當存在“根相對”導入時,aurelia-cli無法捆綁...
編輯解決方案:感謝Sinan Bolel的解決方案,通過更新一些軟件包解決了相對路徑問題:
npm i -D gulp-typescript@^3.1.5 typings@^2.1.0 aurelia-tools@^1.0.0
之后我得到的語義錯誤來自一些仍然安裝且不需要的打字,以及將打字稿作為本地npm包以及全局安裝。 我卸載了它們,所有錯誤都消失了。
npm uninstall @types/es6-promise
npm uninstall @types/es6-collections
npm uninstall typescript
看看這個Gist示例 ,其中:
src/lib/init.ts
創建了一個類Init
import init from 'lib/init'
src/main.ts
import init from 'lib/init'
而沒有相對路徑 main.ts
更改為import environment from 'environment'
而不是from './environment'
- 這也適用。
使用CLI生成的原始tsconfig
,我的構建失敗並顯示錯誤:
src/main.ts(3,18): error TS2307: Cannot find module 'lib/init'.
(無效)建議:
在tsconfig中,您可以嘗試:
a)在compilerOptions.paths
添加./
提前src
(這解決了我機器上的問題)
paths: {"*": ["./src/*"]}
^
b)添加filesGlob
"filesGlob": [
"./src/**/*.ts",
"./test/**/*.ts",
"./typings/index.d.ts",
"./custom_typings/**/*.d.ts"
],
編輯:以前的建議不起作用,如何更新包:
npm i -D gulp-typescript@^3.1.5 typings@^2.1.0 aurelia-tools@^1.0.0
請參閱https://github.com/aurelia/cli/issues/494#issuecomment-282103289中的結果
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.