如何在打字稿中正确导入非相对路径？

Question

我在导入我的typescript类时遇到问题。

// Error thrown here...
import * as Foundation from 'foundation/foundation';

// This works fine, until I add the above import...
export class HelloWorldScene {
  constructor() {
    console.log("...success...");
  }
}

每当我尝试使用ts-loader构建我的项目以在gulp webpack任务中为我转换它时，会抛出此错误：

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: [object Object]

我几乎肯定是因为我正在导入图书馆。

Answer 1

我有点晚了，但将来可能对某人有用..

解决方案：

在这个小例子中，我们使用reactjs typescript webpack2，但使用非相对路径

配置指示基本URL的编译器和解析导入的路径，例如：根目录中的tsconfig.json p

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "baseUrl": "src", // URL FIX 'src/comp1' TO  @import 'comp1'
    "paths": {
      "*": [
        "*", //Paths 
        "modules/*"
      ]
    }

  }
}

在webpack中，我们指定解析器webpack2 config

  resolve: {
    extensions: [
        '.tsx',
        '.ts',
        '.json',
        '.js',
        '.jsx',
        '.css'
    ],
    modules: ["node_modules", 'src']

}

full example

结果：

相对导入和非亲属typescript info

之间的差异

我希望它有助于某人