2017-12-01 1 views
0

안녕하세요 저는 최근 출시 된 모든 typescript/jquery/webpack 앱을 보유하고 있습니다. 모든 것이 잘 작동합니다. aws-sdk를 소개하고 싶었습니다. 나는 '_'와 같은 다른 라이브러리를 가져 오기 위해 사용했던 패턴을 따라 갔다.typescript/jquery/webpack 앱에서 aws-sdk 사용하기

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

내가 다음 타이프의 aws-sdk instructions을 따라 : 내가 그것을 실행 갈 때 발생하는

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

내가 같은 오류의 무리를 얻을 수있다.

같은 결과.

가져 오기 전 우리는 다음과 같다 :

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

및 webstorm 불평하지 않고 자동 완성 작품.

도움이 될 경우 내 webpack이 포함되어 있습니다.

질문 :이 유형의 프레임 워크에 aws-sdk를 포함시키는 적절한 방법은 무엇입니까?

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/*.*'], {}) 
    ] 
}; 

답변

0

다른 결과로 여러 가지를 시도했습니다. 내가 프로젝트를 컴파일 할 수있는 시점에 도달했지만 런타임 중에 모든 생성자와 메소드가 존재하지 않아 실패합니다. 이 문제가로드 문제 유형이라고 생각 했습니까? 정확하게 설명하는 방법조차 모릅니다.

그러나 typescript 모듈과 컴파일 모듈 유형을 읽은 후 here에서 대답했습니다.

그것은 여러 가지가 결합 된 것입니다. 기사 하나 하나 코멘트에서 :

먼저 문제의 설명을 ...

사용하여 AWS-SDK의 사전 구축 된 버전. 모든 의존성이 단일 파일 에 포함되었으므로이 문제를 회피합니다. require() 문제.

aws-sdk 노드 모듈에서 미리 빌드 된 파일은 dist/aws-sdk.js에 있습니다. require ('aws-sdk/dist/aws-sdk')와 함께 가져올 수 있습니다.

미리 만들어진 파일은 변수를 내보내는 대신 하나의 AWS를 창 개체에 추가하기 만하면됩니다.

그리고 어떻게 작동하게 했나요? 창 개체에 추가하는 것이 효과가 없었기 때문입니다.

import '../node_modules/aws-sdk/dist/aws-sdk'; 
declare const AWS: any; 
관련 문제