首页 > 解决方案 > 将用于浏览器服务的单个 AWS SDK JS 与 webpack 和 Typescript 集成

问题描述

我有一个 Vue.js 项目,已与 Typescript 和 webpack 集成。一切都很好。我正在添加一个简单的 SNS 消息服务,因此我集成了 AWS 开发工具包。一切似乎都很好,但显然,如果我使用其中的一小部分,我不想捆绑整个 AWS 开发工具包。我尝试遵循所有建议均无济于事。

问题

我希望能够做到以下几点:

import { SNS } from 'aws-sdk/clients/sns';

但我得到一个错误

...node_modules/aws-sdk/clients/sns"' 没有导出的成员 'SNS'。

有趣的是...

import { SNS } from 'aws-sdk'工作得很好(但给我留下了一个 5MB+ 的缩小构建文件,因为它包含整个 sdk)。

我确实有一个解决方法

我可以使用 AWS 开发工具包构建器工具,只需下载 SNS 服务,将该文件添加到我的目录树,然后SNS从该文件导入。这也很好,是我目前最好的解决方法。但是现在我不得不在 npm 之外维护一个文件,这不是很好。

关于我在哪里出错的任何想法?


一些可能有用的额外信息

这里有一些额外的信息可能会有所帮助。

我的ts.config.json文件看起来像

{
  "compilerOptions": {
    "outDir": "./inc/dist/ts-built/",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "strict":  true, 
    "target": "es5",
    "module": "es2015",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node"   
  },
  "include": [
    "./inc/src/**/*"
  ],
  "exclude": [
    "node_modules"    
  ]
}

我文件的相关部分webpack.config.js目前看起来像

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

module.exports = {
    //context: path.resolve(__dirname, "./inc/src"),
    resolve: {
        extensions: ['.ts', '.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    entry: {
        main: './inc/src/search/main.ts'
    },
    output: {
        publicPath: '/inc/dist',
        path: path.resolve(__dirname, './inc/dist'),
        filename: '[name].build.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                }
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                }
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }
        ]
    }
};

标签: webpackaws-sdk-js

解决方案


推荐阅读