说服webpack使用node_modules / @ types

时间:2016-12-01 15:07:09

标签: angularjs typescript webpack

我试图掌握使用Typescript 2,Webpack和Angular 1.5,但是在构建Webpack时一直抱怨它:

无法解析模块' @ types / angular'在C:\ play \ gt \ src

我很难过。谷歌搜索这个并搞砸了但是我无处可去。

我的app.ts看起来像:

import * as angular from "@types/angular";
let app = angular.module ("GT.module", []);

我的tsconfig看起来像:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "typeRoots" : [
        "node_modules/@types"
      ]
  },
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ],
  "include" : [
    "src/**/*"
  ]
}

...最后是webpack配置:

module.exports = {
        entry: './src/app.ts',
        output: {
            filename: './dist/app.js'
        },
        devtool: "source-map",
        resolve: {
            extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
            modulesDirectories: ["node_modules"]
        },
        module: {
            loaders: [
                { test: /\.ts$/, loader: 'ts-loader' }
            ]
        }
    }

2 个答案:

答案 0 :(得分:2)

您的目录树是什么样的? 它应该是这样的:

node_modules/
   @types/
      angular/
src/
tsconfig.json
webpack.config.js

然后你不需要"typeRoots" : ["node_modules/@types"]

import * as angular from "@types/angular";应该成为import * as angular from "angular";

Typescript编译器2.0将知道在哪里查找正确位置的输入(即:node_modules/@types

答案 1 :(得分:1)

@types不是您可以导入的模块,它们是用于编译器引用的typedef。

@types/angular包实际上没有实现.module,您的代码将会中断(如果它编译)。

你可能想做更多的事情:

/// <reference path="../node_modules/@types/angular/index.d.ts" />
import * as angular from "angular";
let app = angular.module ("GT.module", []);

,您通常甚至不需要reference,因为编译器会自动包含@types/*个包中的typedef,除非您告诉它不要(通过设置{您types中的{1}}或typeRoot。此行为已在v2中添加,并且是最新的。