使用相对导入路径时，Aurelia捆绑失败 [英] Aurelia bundling fails when using relative import path

问题描述

我正在使用带有打字稿的aurelia，并且我想避免使用类似的相对导入路径:

I'm using aurelia with typescript and I wanted to avoid using relative import path like :

import { DialogBox } from '../../resources/elements/dialog-box';

但是

import { DialogBox } from 'resources/elements/dialog-box';

我修改了tsconfig.json，以便编译器通过添加 baseUrl 和 paths 来处理相对路径，如下所示:

I modified my tsconfig.json so the compiler handles relative paths by adding baseUrl and paths like this:

"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 步骤，但在跟踪某些文件时失败:

But when I run the cli's command 'au run --watch', I can see all steps working fine up to the writeBundle step that fails when tracing some files:

Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'configureEnvironment'...
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'processCSS'
Finished 'processMarkup'
Finished 'buildTypeScript'
Starting 'writeBundles'...

该过程失败，并出现以下错误:

The process fails with the following error:

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,

奇怪的是:还有其他文件使用非相对路径引用，并且捆绑程序不会失败.

The strange thing is: there are other files that are referenced with non-relative path and where the bundler doesn't fail.

还有另一件奇怪的事情:如果我使用观察程序离开相对路径并进行捆绑，则一切正常.然后，如果我从有问题的导入中删除了相对的'../../'，我会收到捆绑警告，但无论如何一切正常...

And another strange thing: if I leave the relative path and bundle using the watcher, everything works fine. Then if I remove the relative '../../' from the problematic import, I get a bundling warning but everything works anyway...

知道我可能做错了什么吗?

Any idea what I might have done wrong?

为更正而

我只是理解了为什么有些文件似乎被捆绑而另一些文件没有捆绑的原因.我注意到所有没有失败的相对于根"导入的文件实际上都是从具有相对路径的其他文件中导入的.所以我想捆扎机是从那里找到的.可以解决一件事，但基本问题仍然存在:当存在相对根"进口时，aurelia-cli无法捆绑...

I just understoof why some files seemed to be bundled while others were not. I noticed that all the files with "root-relative" imports that didn't fail were actually imported from other files with a relative path. So I suppose the bundler finds them from there. That solves one thing but the base problem is still there : aurelia-cli fails bundling when there are "root-relative" imports...

针对解决方案进行了 多亏了下面的Sinan Bolel解决方案，通过更新一些软件包解决了相对路径问题:

EDITED FOR SOLUTION: Thanks to the solution of Sinan Bolel here under, the relative path problem was solved by updating some packages:

npm i -D gulp-typescript@^3.1.5 typings@^2.1.0 aurelia-tools@^1.0.0

我后来遇到的语义错误是由于一些仍在安装中并且不需要的类型，以及将Typescript作为本地npm软件包以及全局安装的. 我卸载了它们，所有错误都消失了.

The semantic errors I got afterward came from some typings that were still installed and not needed as well as having typescript installed as a local npm package as well as globally. I uninstalled them and all errors disappeared.

npm uninstall @types/es6-promise
npm uninstall @types/es6-collections
npm uninstall typescript

推荐答案

看看这个要点示例其中:

• 我在 src/lib/init.ts
中创建一个类Init
• 我 src/main.ts 中的import init from 'lib/init'没有相对路径
• 我将 main.ts 更改为import environment from 'environment'，而不是from './environment'.

• I create a class Init in src/lib/init.ts
• I import init from 'lib/init' in src/main.ts without a relative path
• I change main.ts to import environment from 'environment' as opposed to from './environment' -- which also works.

使用原始 tsconfig 由CLI生成，我的构建因以下错误而失败:

Using the original tsconfig generated by the CLI, my build failed with the error:

src/main.ts(3,18): error TS2307: Cannot find module 'lib/init'.

更改为 tsconfig 中的我的要旨，构建成功.

(无效)建议:

在tsconfig中，您可以尝试:

In tsconfig, can you please try:

a)在compilerOptions.paths中的src之前添加./(这解决了我机器上的问题)

a) Adding ./ ahead of src in compilerOptions.paths (this solves the issue on my machine)

  paths: {"*": ["./src/*"]}
                 ^

b)添加filesGlob

"filesGlob": [
  "./src/**/*.ts",
  "./test/**/*.ts",
  "./typings/index.d.ts",
  "./custom_typings/**/*.d.ts"
],

---

以前的建议不起作用，如何更新软件包:

---

edit: Previous suggestions did not work, how about updating packages:

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

这篇关于使用相对导入路径时，Aurelia捆绑失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！