webpack TS2304 找不到名称“地图”、“设置”、“承诺”答案

【问题标题】：webpack TS2304 Cannot find name 'Map', 'Set', 'Promise'webpack TS2304 找不到名称“地图”、“设置”、“承诺”
【发布时间】：2017-01-17 21:45:32
【问题描述】：

我有以下 webpack.config.js

var path = require("path");
var webpack = require('webpack');

module.exports = {
  entry: {
    'ng2-auto-complete': path.join(__dirname, 'src', 'index.ts')
  },
  resolve: {
    extensions: ['', '.ts', '.js', '.json', '.css', '.html']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].umd.js",
    library: ["[name]"],
    libraryTarget: "umd"
  },
  externals: [
    /^rxjs\//,    //.... any other way? rx.umd.min.js does work?
    /^@angular\//
  ],
  devtool: 'source-map',
  module: {
    loaders: [
      { // Support for .ts files.
        test: /\.ts$/,
        loaders: ['ts', 'angular2-template-loader'],
        exclude: [/test/, /node_modules\/(?!(ng2-.+))/]
      }
    ]
  }
};

以及下面的 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitHelpers": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": true,
    "allowUnusedLabels": true,
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": false,
    "allowSyntheticDefaultImports": true,
    "suppressExcessPropertyErrors": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist",
    "baseUrl": "src"
  },
  "files": [
    "src/index.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

当我按以下方式运行tsc 命令时，一切正常。

ng2-auto-complete (master)$ tsc --declaration
ng2-auto-complete (master)$

当我运行webpack 命令时，它显示打字稿编译错误。

ng2-auto-complete (master)$ webpack
ts-loader: Using typescript@2.0.0 and /Users/allen/github/ng2-auto-complete/tsconfig.json
Hash: bd6c50e4b9732c3ffa9d
Version: webpack 1.13.2
Time: 5041ms
                       Asset     Size  Chunks             Chunk Names
    ng2-auto-complete.umd.js  24.4 kB       0  [emitted]  ng2-auto-complete
ng2-auto-complete.umd.js.map  28.4 kB       0  [emitted]  ng2-auto-complete
    + 11 hidden modules

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts
(18,37): error TS2304: Cannot find name 'Map'.

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts
(96,42): error TS2304: Cannot find name 'Map'.

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/web_workers/worker/location_providers.d.ts
(21,86): error TS2304: Cannot find name 'Promise'.
...
ng2-auto-complete (master)$

我不知道我在 webpack 和 typescript 编译中缺少什么。

node_modules 已被排除在 tsconfig.json 中

“排除”：[ “节点模块” ],

类型定义在node_modules

  "devDependencies": {
    "@types/core-js": "^0.9.32",
    "@types/node": "^6.0.31"

我也尝试使用typings.json 和typings 目录但没有成功。

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160815222444"
  }
}

仅供参考，版本

$ node --version
v5.7.1
$ npm --version
3.6.0
$ tsc --version
Version 2.0.0

如何使用webpack 命令消除 TS2304 错误？

【问题讨论】：

ES6 库是使其工作所需的唯一库。如果您在使用 node 运行 typescript 时遇到同样的问题

标签： typescript webpack

【解决方案1】：

对我来说，解决方案是安装@types/node:

yarn add @types/node --dev

或者如果你更喜欢 npm：

npm install @types/node --dev

但是，我想如果您打算继续使用“Map”、“Set”或“Promise”，最好在 tsconfig.json 的“lib”数组中包含“es6”。

【讨论】：

【解决方案2】：

要解决这个问题，你只需要像这样在你的 ts 文件中导入 map 方法：

import { map } from 'rxjs/operators';

【讨论】：

【解决方案3】：

只需添加：

 "lib": ["es6"] // means at least ES6

不要改变目标。 Target 用于告诉 Typescript 将您的 .ts 文件编译到哪个版本的 ECMAScript 中。当然，您可以更改它，如果您的应用程序将在其中运行的浏览器将支持该版本的 ECMAScript。

例如，我使用"target": "es5" 和"lib": ["es6"]。

另一个原因可能是：

您的.ts 文件不在"rootDir": "./YourFolder", 下

【讨论】：

请注意lib 选项有more than one library by default;，上面的示例将删除其他默认库，例如DOM 和ScriptHost（以及DOM.Iterable 用于ES6 目标）。

【解决方案4】：

就我而言，我必须运行：

npm install typings -g
typings install

这解决了我的问题。

【讨论】：

请注意，自 TypeScript 2.0 起，typings 已被弃用。请改用@types。

【解决方案5】：

https://stackoverflow.com/a/44800490/9690407

npm install typings -g
typings install

在 npm 5.6.0 中已弃用！请改用npm install @types/core-js 语法。

【讨论】：

【解决方案6】：

我正在使用node.js v10.16.3. 我的问题是打字稿编译器忽略了我的tsconfig.json 文件。

三个解决方案对我有用：

安装 ts-node 并使用它来编译和运行文件
编译文件时使用tsc filename.ts --lib "es6", "dom"
安装@types/node，这将允许您运行tsc filename.ts而不会出错。

【讨论】：

【解决方案7】：

对于 es6 使用这个

tsc filename.ts --lib es2015

【讨论】：

【解决方案8】：

要解决此错误，请更改 tsconfig.json 文件中的以下属性。

"lib": [
      "es2018",
      "dom",
      "es5", 
      "es6"
    ],
"module": "es2015",
"target": "es6"

之后在终端中运行以下命令。

npm install @types/es6-shim

错误已解决。

【讨论】：

【解决方案9】：

Map、Set 和 Promise 是 ES6 功能。
在您的tsconfig.json 中，您正在使用：

"target": "es5"

这会导致编译器使用普通的es5 lib.d.ts，它缺少上述类型的定义。

你想使用lib.es6.d.ts:

"target": "es6"

【讨论】：

基于here，目标应该是'es5'来生成es5代码。如果目标是es6，它是否仍然适用于较低的浏览器，例如'IE11'？
否，并非所有浏览器都支持最新的 es6 功能。但是如果你想使用 Promise 和 Map 等 es6 特性，那么你需要以 es6 为目标或者从 libe.es6.d.ts 复制你需要的定义
那么，如果我们要满足IE11，es6对象； Map, Promise 应转换为 es5 对象。因此，目标应该是es5 而不是es6。我说的对吗？
它不是获取库的“目标”，而是“库”应该包含这些对象的库。看看@allenhwkim 的回答。这解决了问题，是正确的答案。
我的意思是，“target”是指定 output 类型应该是什么（在 OP 的情况下是 es5），“lib”是指定 webpack 应该使用的库用于编译源代码代码。您的回答/评论似乎听起来好像“目标”是指定库。

【解决方案10】：

如果您想知道为什么这些修复都不起作用，请记住——如果您在命令行上指定要编译的文件或 package.json tsc 将不会读取您的 tsconfig.json文件，因此无效。而是在 tsconfig.json 中指定“files”和“outDir”，“lib”修复程序之一可能对您有用。然后只编译：

tsc --sourcemaps

【讨论】：

好极了。非常感谢。
获胜者，在阅读完所有这些内容后，这是最后一篇文章，也是让我“哦，duh”并修复它的帖子。谢谢
对于 typescript 3.7，这个选项看起来像 --sourceMap

【解决方案11】：

由于已经回答了直接对 OP 的回答，我想我会添加为我修复它的内容。我的情况略有不同，因为我没有使用 WebPack，并且在尝试使用 tsc 时遇到了这些错误。其他人给出的答案（将“es6”添加到lib）并没有为我解决。对我来说，问题是我的机器上安装了 v9.11.1 的节点，但我使用 npm 获取了最新的 v10+ 的“@types/node”。一旦我卸载了那个节点类型并安装了一个特定的 v9 节点类型文件，这个问题就解决了。

【讨论】：

【解决方案12】：

tsc index.ts --lib "es6"

如果在 tsconfig.json 中添加 lib 不起作用，请使用上面的命令行选项

【讨论】：

【解决方案13】：

我必须从 npm 安装 core-js 类型来解决问题

npm install @types/core-js

解释：
@types npm 包的目标是使用 npm 获取类型定义。使用这些类型定义是 TypeScript 2.0 的一项功能。

@types 替换当前的工具，例如 typings 和 tsd，尽管这些工具将在一段时间内继续受到支持。

【讨论】：

【解决方案14】：

我将它添加到tsconfig.json 中工作，它似乎没有任何错误。

  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "es6", "dom"],  <--- this
    ...
  }

我不确定lib 是否适用于 Typescript 2.0 功能，但发现有几个库可用

来自 typescript 配置架构（注意 es2015.collection）

 "lib": {
      "description": "Specify library file to be included in the compilation. Requires TypeScript version 2.0 or later.",
      "type": "array",
      "items": {
        "type": "string",
        "enum": [ "es5", "es6", "es2015", "es7", "es2016", "es2017", "dom", "webworker", "scripthost", "es2015.core", "es2015.collection", "es2015.generator", "es2015.iterable",
                    "es2015.promise", "es2015.proxy", "es2015.reflect", "es2015.symbol", "es2015.symbol.wellknown", "es2016.array.include", "es2017.object", "es2017.sharedmemory" ]
      }
    }

这解决了编译错误，但我仍然想知道为什么tsc 命令可以正常工作，而webpack 不能。 tsc 在不使用lib by tsconfig.json 的情况下搜索所有可能的库？

【讨论】：

您应该选择您的答案作为首选解决方案
谢谢你，我是搜索大师。你的回答是最好的

【解决方案15】：

在您的 tsconfig.json 中，只需将 "target": "es5" 更改为 "target": "es6"

【讨论】：