"予期しないトークンのインポート"角度2の外部モジュール

Question

私のプロジェクトでngx-magicsearchモジュールを使用しています。ただし、次のエラーが発生します。 未知のSyntaxError：予期しないトークンのインポート。

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: { 
     'app': './app/app.module.ts', 
     'vendor': './app/vendor/vendor.ts' 
    }, 
    resolve: { 
     extensions: ['', '.ts', '.js', '.css', '.html'], 
     modulesDirectories: ["node_modules", "assets\\js"] 
    }, 
    output: { 
     filename: '[name].bundle.js', 
    }, 
    module: { 

     noParse: [/jszip.js$/], 

     loaders: [{ 
       test: /\.ts$/, 
       loaders: [ 
        'awesome-typescript-loader', 
        'angular2-router-loader' 
       ] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*$|$)/, 
       loader: 'file?name=assets/[name].[hash].[ext]' 
      }, 
      { 
       test: /\.css$/, 
       exclude: './app', 
       loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
      }, 
      { 
       test: /\.css$/, 
       include: './app', 
       loader: 'raw' 
      }, 
      { 
       test: /[\\\/]assets[\\\/]js[\\\/]modernizr\.min\.js$/, 
       loader: "imports?this=>window!exports?window.Modernizr" 
      } 
     ] 
    }, 

    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery", 
      "window.jQuery": "jquery", 
      KJUR: "jsrsasign-latest-all-min", 
      b64utoutf8: "base64x", 
      dateFormat: "dateformat", 
      moment: "moment" 
     }), 
     new ExtractTextPlugin('[name].bundle.css'), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['app', 'vendor'] 
     }) 
    ], 
    devServer: { 
     historyApiFallback: true, 
     stats: 'minimal' 
    } 
}; 

tsconfig.js：

{ 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "removeComments": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "noEmitHelpers": false, 
     "sourceMap": true, 
     "preserveConstEnums": true, 
     "alwaysStrict": true 

    }, 
    "exclude": [ 
     "node_modules" 
    ], 
    "compileOnSave": false, 
    "buildOnSave": false 
} 

やエラー、私は角度4.2.5のバージョンを使用しています 、WebPACKのバージョン1.15.0と活字体2.3.4 は、ここに私のWebPACKのファイルです：

Answer 1

entry point of ngx-magicsearchはESモジュールを使用します。あなたはそれを使用するためにバベルでそれらを蒸散する必要があります。通常、パッケージは透明版を公開していますが、現在では多くのユーザーがESモジュールをサポートするバンドルツールで使用できるESモジュールを含むバージョンも公開しています。 ESモジュールは、webpack 2以降、すぐにサポートされています。

Webpackをアップグレードすることを強くお勧めします。設定を少し変更する必要があります。詳細はofficial migration guideをご覧ください。