将es6承诺与TypeScript 2.1 ES5网页包一起使用（异步/等待）

我尝试将

es6 promise

与针对ES5和webpack的TypeScript 2.1.1一起使用

应用程序ts

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

module.exports = {
    entry: {
        'app': './app.ts',
    },

    output: {
        path: 'dist/ie',
        filename: '[name].js'
    },

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    devtool: 'source-map',

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader']
            },
        ]
    },
    plugins: [  
        new webpack.ProvidePlugin({
            Promise: 'imports?this=>global!exports?global.Promise!es6-promises'
        }),

    ]
};

导入“es6承诺/自动”；
出口类食品{
承诺{
回报承诺。解决（“baz”）；
}
}

webpack.common.js

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

module.exports = {
    entry: {
        'app': './app.ts',
    },

    output: {
        path: 'dist/ie',
        filename: '[name].js'
    },

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    devtool: 'source-map',

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader']
            },
        ]
    },
    plugins: [  
        new webpack.ProvidePlugin({
            Promise: 'imports?this=>global!exports?global.Promise!es6-promises'
        }),

    ]
};

package.json

{
  "name": "foo",
  "ieArtifactName": "foo",
  "version": "3.0.0-1",
  "description": "...",
  "main": "src/app.ts",
  "author": {
    "name": "...",
    "email": "...",
    "url": "..."
  },
  "dependencies": {
    "@types/es6-promise": "0.0.32",
    "@types/jquery": "^2.0.34",
    "@types/underscore": "^1.7.34",
    "es6-promise": "^4.0.5",
    "es6-promise-promise": "^1.0.0",
    "es6-promises": "^1.0.10",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "awesome-typescript-loader": "=2.2.4",
    "clean-webpack-plugin": "^0.1.14",
    "css-loader": "^0.26.0",
    "exports-loader": "^0.6.3",
    "http": "0.0.0",
    "https": "^1.0.0",
    "imports-loader": "^0.6.5",
    "load-grunt-tasks": "^3.5.2",
    "node-static": "^0.7.9",
    "pug": "^2.0.0-beta6",
    "pug-html-loader": "^1.0.9",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.1.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0"
  }
}

我使用命令行启动webpack

webpack --config config/webpack.common.js

行为如下所示：

• Webstorm 2016.3.1突出了所有细节
• 编译器运行
• 编译器显示2个错误 [default]D:…\app.ts:4:16中出现错误 找不到名称“Promise”

我尝试了

es6承诺

，

es6承诺

，

es6承诺

和一系列导入表达式

当我从“es6 Promise”添加

import{Promise}

webstorm将其突出显示为未使用的导入，但错误消失了。是否可以在不导入的情况下使用针对ES5的承诺？因为在将目标更改为ES6之后，我必须触摸每个文件并删除导入

异步的问题 我的目标是能够使用async/await，因为我已经习惯了从C#开始使用它，我讨厌回调。如果我把代码改成

export class Foo {
    async bar() : Promise<string>{
        return "baz";
    }
}

导出类Foo{
异步条（）：承诺{
返回“baz”；
}
}

编译器再次抱怨

找不到名称“Promise”

从“es6承诺”添加导入

import{Promise}使情况变得更糟

重复标识符“承诺”。编译器在包含异步函数的模块的顶级作用域中保留名称“Promise”

通过将
“ES2015.promise”
添加到要包含在tsconfig.json中的库文件列表中，可以使TypeScript编译器了解ES2015承诺：

本机承诺仅在ES2015中引入，在您瞄准的ES5中不可用。这就是为什么TypeScript编译器说它找不到名称
Promise
。由于您提供的是polyfill，因此在运行时将有一个
承诺。上述解决方案使TypeScript意识到了这一点

编辑Sven Michael

您甚至不需要通过提供插件提供
承诺
。您只需
导入“es6承诺/自动”
您也可以使用es6 promise polyfill。您可以通过以下方式引用它（Typescript+Webpack2）：

这应该能回答你的问题：嗯，答案中的一条评论很有帮助。添加对app.ts中键入内容的引用有帮助<代码>//
。我不需要在任何文件中导入它。您还应该这样做：entry:{'es6 promise'，'app'：'./app.ts'，}，我认为这是一个不正确的解决方案。true typescript将知道ES6承诺。但编译器的目标仍然是ES5。当我们在ES5浏览器上使用编译后的脚本时，我们会发现错误
Promise
未找到。这里的关键部分是“既然您提供了一个polyfill，那么在运行时就会有一个Promise。”TypeScript本身不包含polyfill
Promise
；因此，您需要提供一个polyfill，这样即使在较旧的浏览器中，
Promise
也可以在运行时使用。
lib
编译器选项只告诉TypeScript它可以在运行时有一个有效的
承诺。
entry: {
    'es6-promise',    
    'app': './app.ts',
}