如何使用webpack导入aws-sdk

Question

我在官方发现了这个问题 ，但看起来他们拒绝回答。 所以我只能在SO上提问。 这是我的错误和警告日志：

WARNING in ./~/aws-sdk/lib/util.js
Critical dependencies:
40:30-45 the request of a dependency is an expression
43:11-53 the request of a dependency is an expression
 @ ./~/aws-sdk/lib/util.js 40:30-45 43:11-53

WARNING in ./~/aws-sdk/lib ^\.\/.*$
Module not found: Error: Cannot resolve directory '.' in /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
 @ ./~/aws-sdk/lib ^\.\/.*$

WARNING in ./~/aws-sdk/lib/api_loader.js
Critical dependencies:
13:15-59 the request of a dependency is an expression
104:12-46 the request of a dependency is an expression
108:21-58 the request of a dependency is an expression
114:18-52 the request of a dependency is an expression
 @ ./~/aws-sdk/lib/api_loader.js 13:15-59 104:12-46 108:21-58 114:18-52

WARNING in ./~/aws-sdk/lib/region_config.json
Module parse failed: /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib/region_config.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "rules": {
|     "*/*": {
|       "endpoint": "{service}.{region}.amazonaws.com"
 @ ./~/aws-sdk/lib ^\.\/.*$

ERROR in ./~/aws-sdk/lib/api_loader.js
Module not found: Error: Cannot resolve module 'fs' in /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
 @ ./~/aws-sdk/lib/api_loader.js 1:9-22

ERROR in ./~/aws-sdk/lib/services.js
Module not found: Error: Cannot resolve module 'fs' in /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
 @ ./~/aws-sdk/lib/services.js 1:9-22

有三种类型：

1. 无法解析模块'fs'

我只需要安装fs就可以解决这个问题。

2. 需要适当的装载机

好吧，这需要安装json-loader ，并在webpack.config.js设置，但也可以解决。

3. 关键依赖关系
4. 找不到模块：错误：无法解析目录'。'

我webpack newbie.So，我不知道如何解决这个问题。 有人会帮助我吗？ 谢谢。

更新：

4. 找不到模块：错误：无法解析目录'。'

这是我的错，配置文件的扩展缺少了.

Answer 1

我找到了这篇博文 ，为我修好了。

基本上，您需要导入库的内置版本。

所有功劳都归功于作者。 这是代码：

require('aws-sdk/dist/aws-sdk');
var AWS = window.AWS;

ES6版本：

import 'aws-sdk/dist/aws-sdk';
const AWS = window.AWS;

Answer 2

配置：

module: {
  noParse: [
   /aws/
  ]
}

用法：

window.AWS到全局AWS对象的引用。

Answer 3

如果要创建节点包，则使用no​​Parse方法应该有效，因为这会将webpack设置为不应用任何解析/加载器。 在创建umd格式的输出文件/库时，这对我不起作用。

要创建一个umd格式的库，我必须使用加载器来浏览aws-sdk并处理json文件。

安装加载器 ：

npm install json-loader --save-dev

npm install transform-loader brfs --save-dev

Webpack配置：

module: {
  loaders: [
    { test: /aws-sdk/, loaders: ["transform?brfs"]},
    { test: /\.json$/, loaders: ['json']},
  ]
},
output: {
  library: 'LibraryName',
  libraryTarget: 'umd'
},
resolve: {
  extensions: ['', '.js']
}

用您自己的命名空间替换LibraryName 。 目前，库将通过构造函数使用，如下所示：

var libObj = new LibraryName();

Answer 4

AWS SDK从2.6.1版开始添加了对webpack支持，请参阅使用webpack和AWS SDK for JavaScript创建和捆绑应用程序 - 第1部分博客文章，描述如何将aws-sdk引入webpack bundle。

Answer 5

使用npm install json-loader --save-dev将以下代码添加到webpack.config.js

  module: {
loaders: [{
  test: /\.js$/,
  loaders: ['babel'],

  exclude: /node_modules/,
},
{
      test: /.json$/,
      loaders: ['json']
    }]

}

只需从'aws-sdk'导入*作为AWS

请注意，我们指定了一个加载器来告诉webpack如何处理导入JSON文件，在这种情况下使用我们之前安装的json-loader。 默认情况下，webpack仅支持JavaScript，但也使用加载器添加对导入其他文件类型的支持。 AWS开发工具包大量使用JSON文件，因此如果没有这些额外配置，webpack将在生成捆绑包时抛出错误。

Answer 6

更新（2015年10月20日）：

aws-sdk解决了这个问题。 我可以从npm使用它。

谢谢，aws-sdk团队。