Pouchdb Angular2的WebPack問題

Question

我的單元測試使用茉莉花2.5的WebPack 2.2.1，和因果報應1.3.0我的角2提供商...

我已經使用離子項目中我的供應商，並建立它離子應用程序腳本一切正常。

然而，當我試圖與角的WebPack過程的東西來構建它出錯

我用Pouchdb它的構造被嚴重翻譯錯誤發生。

Unhandled Promise rejection: pouchdb_browser_1.default is not a constructor ; Zone: ProxyZone ; Task: Promise.then ; Value: TypeError: pouchdb_browser_1.default is not a constructor

如果我建立它然後更改pouchdb_browser_1.default使用postbuild過程代碼pouchdb_browser工作正常。

不幸的是，我無法更改將在測試期間執行的代碼。

請參考下面我webpack.test.js

const helpers = require('./helpers'), 
webpack = require('webpack'), 
LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); `module.exports = { 

devtool: 'inline-source-map', 



resolve: { 
    extensions: ['.ts', '.js'], 
    modules: [helpers.root('src'), 'node_modules'] 
}, 

module: { 
    rules: [{ 
     enforce: 'pre', 
     test: /\.ts$/, 
     loader: 'tslint-loader', 
     exclude: [helpers.root('node_modules')] 
    }, { 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: 'source-map-loader', 
     exclude: [ 
      // these packages have problems with their sourcemaps 
      helpers.root('node_modules/rxjs'), 
      helpers.root('node_modules/@angular') 
     ] 
    }, { 
     test: /\.ts$/, 
     loader: 'awesome-typescript-loader', 
     query: { 
      // use inline sourcemaps for "karma-remap-coverage" reporter 
      sourceMap: false, 
      inlineSourceMap: true, 
      module: "commonjs", 
      removeComments: true 
     }, 
     exclude: [/\.e2e\.ts$/] 
    }, { 
     enforce: 'post', 
     test: /\.(js|ts)$/, 
     loader: 'istanbul-instrumenter-loader', 
     include: helpers.root('src'), 
     exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/] 
    }], 
}, 

plugins: [ 
    // fix the warning in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 
    new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     helpers.root('./src') 
    ), 

    new LoaderOptionsPlugin({ 
     debug: true, 
     options: { 

      /** 
      * Static analysis linter for TypeScript advanced options configuration 
      * Description: An extensible linter for the TypeScript language. 
      * 
      * See: https://github.com/wbuchwalter/tslint-loader 
      */ 
      tslint: { 
       emitErrors: false, 
       failOnHint: false, 
       resourcePath: 'src' 
      }, 

     } 
    }) 
]}; 

任何想法？

謝謝！

Answer 1

聽起來像是將CommonJS轉換爲ES6模塊的問題。你是否推薦使用TypeScript方式導入PouchDB，即像這樣？

import * as PouchDB from 'pouchdb';