Webpack 模块解析

Question

我第一次尝试使用 TypeScript 2.2、Angular2 在 MVC Core 中构建 Angular 2 应用程序> 和 Webpack。

我一直相当准确地关注Angular Documentation - 唯一的主要区别是我引用了最新的 NPM 模块，但是当我运行 Webpack 时，我收到以下错误：

ERROR in [at-loader]
    TS2688: Cannot find type definition file for 'node'.
ERROR in [at-loader] ./src/app/app.component.ts:6:15 
    TS2304: Cannot find name 'require'.
ERROR in [at-loader] ./src/app/app.component.ts:7:14 
    TS2304: Cannot find name 'require'.
ERROR in [at-loader] ./src/main.ts:5:5 
    TS2304: Cannot find name 'process'.
ERROR in [at-loader] ./src/polyfills.ts:3:1 
    TS2304: Cannot find name 'require'.
ERROR in [at-loader] ./src/polyfills.ts:5:5 
    TS2304: Cannot find name 'process'.
ERROR in [at-loader] ./src/polyfills.ts:10:5 
    TS2304: Cannot find name 'require'.

我怀疑集合中的第一个错误是最重要的。经过一番挖掘，我修改了将 types 和 typeRoots 添加到 tsconfig.json 的建议：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "noEmitOnError": true,
    "suppressImplicitAnyIndexErrors": true,
    "types": [ "node" ],
    "typeRoots": [
      "node_modules/@types"
    ]
  }
}

这并没有解决问题。作为参考，这是我的 package.json 文件：

{
  "name": "WebPackAngular2.Web",
  "author": "",
  "license": "ISC",
  "version": "1.0.0",
  "description": "Basic WebPack project",
  "keywords": [
    "angular2",
    "webpack",
    "demo"
  ],
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "devDependencies": {
    "@types/jasmine": "^1.3.2",
    "@types/node": "^7.0.8",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.2",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "css-loader": "^0.27.2",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "jasmine-core": "^2.5.2",
    "less": "^2.7.2",
    "less-loader": "^3.0.0",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.1",
    "style-loader": "^0.13.2",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1",
    "webpack-cleanup-plugin": "^0.5.1",
    "webpack-dev-server": "^2.4.2",
    "webpack-merge": "^4.0.0",
    "webpack-notifier": "^1.5.0"
  },
  "dependencies": {
    "@angular/common": "^2.4.9",
    "@angular/compiler": "^2.4.9",
    "@angular/core": "^2.4.9",
    "@angular/forms": "^2.4.9",
    "@angular/http": "^2.4.9",
    "@angular/platform-browser": "^2.4.9",
    "@angular/platform-browser-dynamic": "^2.4.9",
    "@angular/router": "^3.4.9",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.1.1",
    "jquery-validation": "^1.16.0",
    "jquery-validation-unobtrusive": "^3.2.6",
    "rxjs": "^5.2.0",
    "zone.js": "^0.8.4"
  }
}

app/app.component.ts

import { Component } from '@angular/core';
import '../assets/css/styles.css';

@Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent { }

polyfills.ts

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

if (process.env.ENV === 'production') {
    // Production
} else {
    // Development and test
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
}

所有其他文件都按照Angular article。

任何帮助将不胜感激。

更新

如果我将 typescript@2.2.1 倒回到之前的 typescript@2.0.10，那么 Webpack 会成功构建项目而不会出错。我猜这个问题归结为以下两件事之一：

1. 需要配置 TypeScript 的方式发生变化或...
2. 2.0 和 2.2 版本之间所需的用户代码语法发生了变化

我很惊讶更多的人没有遇到这个问题（但话说回来，他们可能比我更了解 Webpack 和 TypeScript！）

Answer 1

结果证明这毕竟不是 TypeScript 问题，而是用户配置问题！

我的 tsconfig.json 文件中的以下引用是错误的：

"typeRoots": [
   "node_modules/@types/"
]

它应该是：

"typeRoots": [
  "../node_modules/@types/"
]

为什么？因为 tsconfig.json 存在于 `/src' - doah！

抱歉浪费了大家的时间。

Answer 2

同样的问题，无法更新到 typescript 2.2.1，我的最后一个工作版本是 2.0.10。