如何使用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團隊。