在打字稿/ jQuery / Webpack应用程序中使用aws-sdk

Question

Hello I have a typescript/jquery/webpack app all recent releases. Everything is working fine. I wanted to introduce the aws-sdk into it. I followed the pattern I used to import other libraries like '_' which do work.

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

what happens when i go to run it is i get a bunch of errors like this:

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'.

I then followed the aws-sdk instructions for typescript.

same result.

The import i us is the following:

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

and webstorm does not complain and the autocomplete works.

My webpack is included if that will help.

Question: What is the proper way to include the aws-sdk into this type of framework.

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

I tried a bunch of things with different results. I got to a point where I could compile my project but during runtime all constructors and methods would fail because they didn't exist. I assumed this was a types loading problem? Not even sure how to describe it correctly.

However after reading about typescript modules and compiling module types, i got my answer from here .

it was a combination of things; one from the article and one from the comments:

The description of the problem first...

Use the pre-built version of the aws-sdk. Using it sidesteps these require() issues because all the dependencies have been included in a single file.

In the aws-sdk node module, the pre-built file is located at dist/aws-sdk.js. You can import it with require('aws-sdk/dist/aws-sdk').

There's one more problem - the pre-built file doesn't export any variables, but instead just adds AWS to the window object.

and how I got it to work, because adding it to the window object did not work.

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