在 typescript / jquery / webpack 应用程序中使用 aws-sdk

Question

您好，我有一个 typescript/jquery/webpack 应用程序所有最新版本。一切正常。 我想将 aws-sdk 引入其中。我遵循了我用来导入其他库的模式，比如 '_' 确实有效。

import * as _ from '../node_modules/lodash-es/lodash';

当我去运行它时会发生什么，我得到了一堆这样的错误：

ERROR in .../code-projects/.../tsconfig.json
error TS2318: Cannot find global type 'Number'.

ERROR in .../code-projects/.../tsconfig.json
error TS2318: Cannot find global type 'Object'.

ERROR in .../code-projects/.../tsconfig.json
error TS2318: Cannot find global type 'RegExp'.

ERROR in .../code-projects/.../tsconfig.json
error TS2318: Cannot find global type 'String'.

然后我按照aws-sdk instructions 进行打字稿。

同样的结果。

我们的导入如下：

import * as AWS from '../node_modules/aws-sdk/dist/aws-sdk';

webstorm 没有抱怨，自动完成功能正常。

如果有帮助，我的 webpack 会包含在内。

问题：将 aws-sdk 包含到此类框架中的正确方法是什么。

const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {

    entry: [
        "bootstrap-webpack",
        './src/index.ts'
    ],

    module: {
        rules: [
            // the url-loader uses DataUrls.
            // the file-loader emits files.
            {
                test: /\.html$/,
                loader: 'raw-loader',
                options: {
                    minimize: true
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {test: require.resolve("jquery"), use: "imports-loader?$=jquery"},
            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'},
            {
                test: /\.png$/,
                exclude: /node_modules/,
                loader: 'url-loader'
            },
            {
                test: /\.gif/,
                exclude: /node_modules/,
                loader: 'url-loader'
            },
            {
                test: /\.jpg/,
                exclude: /node_modules/,
                loader: 'url-loader'
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader"
            },
            {test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/},
            {
                test: /.json$/,
                loaders: ['json']
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.ts']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

    plugins: [

        new HtmlWebpackPlugin({
            template: './src/index.html',
            hash: true

        }),
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new CleanWebpackPlugin(['dist/*.*'], {})
    ]
};

Answer 1

我尝试了很多不同的结果。我到了可以编译我的项目的地步，但是在运行时所有构造函数和方法都会失败，因为它们不存在。我认为这是一个类型加载问题？甚至不知道如何正确描述它。

然而，在阅读了关于 typescript 模块和编译模块类型的信息后，我从here 得到了答案。

这是多种事物的结合；一篇来自文章，一篇来自 cmets：

先描述问题...

使用 aws-sdk 的预构建版本。使用它可以避开这些 require() 问题，因为所有依赖项都包含在 单个文件。

在 aws-sdk 节点模块中，预建文件位于 dist/aws-sdk.js。您可以使用 要求（'aws-sdk/dist/aws-sdk'）。

还有一个问题 - 预建文件没有导出任何内容 变量，但只是将 AWS 添加到窗口对象。

以及我是如何让它工作的，因为将它添加到窗口对象不起作用。

import '../node_modules/aws-sdk/dist/aws-sdk';
declare const AWS: any;