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不会抱怨并且自动完成工作正常。

如果有帮助，我的网站包含在内。

问题：将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

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

然而，在阅读了关于打字稿模块和编译模块类型之后，我从here得到了答案。

这是一组事物;一篇来自文章，一篇来自评论：

首先描述问题...

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

在aws-sdk节点模块中，预构建文件位于   DIST / AWS-sdk.js。你可以用它导入它   要求（＆＃39; AWS-SDK / DIST / AWS-SDK＆＃39）。

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

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

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

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

1 个答案: