如何在反应中将aws-sdk导入tsx文件答案

【问题标题】：how to import aws-sdk to tsx file in react如何在反应中将aws-sdk导入tsx文件
【发布时间】：2016-11-07 12:05:24
【问题描述】：

我使用 typescript (tsx) 进行反应。在上传图片任务中，我使用 aws-sdk 上传到服务器 s3 。我还通过 npm 和 typings 安装了 aws-sdk。

上传文件.tsx

import * as AWS from 'aws-sdk';
//constant
import DefaultValue from '../../Constants/DefaultValue';

AWS.config.update({
    region: DefaultValue.REGION,
    credentials: new AWS.Credentials(DefaultValue.ACCESS_KEY_ID, DefaultValue.SECRET_KEY)
});

class UploadFile extends React.Component<any,any> {
    s3: any;
    constructor() {
        super();

        this.s3 = new AWS.S3({apiVersion: '2016-11-07'});
    }

}

Chrome 控制台错误：“AWS 未定义”。我如何导入 AWS？感谢您的帮助。

【问题讨论】：

react-js 用于前端。您将把 ACCESS_KEY_ID 和 SECRET_KEY 放入前端。你神志清醒吗？ :)
@DiligentKeyPresser 哦，我知道这是有风险的。但这是我的私人网站。它只是在本地使用。

标签： reactjs typescript amazon-s3 aws-sdk

【解决方案1】：

您需要实际捆绑 aws-sdk 包，或完全避免使用导入。

如果你使用 Webpack 路由并在你的依赖中打包，你可以read about that here。您需要 npm install -S aws-sdk 并使用 TypeScript 中的加载器，例如 ts-loader 或 awesome-typescript-loader。

如果您想继续使用脚本标签，则必须编写如下内容：

import * as _AWS from "aws-sdk";
declare var AWS: typeof _AWS;

_AWS 本身的导入将被删除（因为您只将它用于它的类型），然后您只需像其他方式一样引用 AWS。

【讨论】：