WebPACKのキャッチされないでSyntaxError：予期しないトークン輸入

Question

クロームのdevのツールが捕捉されないでSyntaxErrorを示している。 後に予期しないトークン輸入はWebPACKのと私のWebアプリケーションを配備します。これはapp.blundle.js、polyfills.bundle.js、vendor.bundle.jsでも発生しています。たとえば、@ angle/platform-b​​rowserから{platformBrowserDynamic}をインポートします。で：

app.blundle.js

webpackJsonp([0],[ 
/* 0 */ 
/*!*****************************!*\ 
    !*** ./angular2App/boot.ts ***! 
    \*****************************/ 
/***/ function(module, exports) { 

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
    import { AppModule }    from './app/app.module'; 

    platformBrowserDynamic().bootstrapModule(AppModule); 


/***/ } 
]); 
//# sourceMappingURL=app.bundle.js.map 

webpack.config.js

module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules\/(?!(@angular\/common\/src\/facade\/.+))|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015'] 
       } 
      }, 
    ... 

Gulpfile

gulp.task('app', ['app_clean'], function (cb) { 
    pump([ 
     gulp.src(srcPaths.app), 
     gp_sourcemaps.init(), 
     gp_typescript(require('./tsconfig.json').compilerOptions), 
     gp_uglify({mangle:false}).on('error', gutil.log), 
     gp_sourcemaps.write('/'), 
     gulp.dest(destPaths.app) 
    ], 
    cb 
    ); 
}); 

// Delete wwwroot/app contents 
gulp.task('app_clean', function() { 
    return gulp.src(destPaths.app + "*", { read: false }) 
    .pipe(gp_clean({ force: true })); 
}); 

// Delete wwwroot/app contents 
gulp.task('app_clean', function() { 
    return gulp.src(destPaths.app + "*", { read: false }) 
    .pipe(gp_clean({ force: true })); 
}); 

gulp.task('webpack', function (done) { 
    webpack(config).run(onBuild(done)); 
}); 

function onBuild(done) { 
    return function (err, stats) { 
     if (err) { 
      gutil.log('Error', err); 
      if (done) { 
       done(); 
      } 
     } 
     else { 
      Object.keys(stats.compilation.assets).forEach(function (key) { 
       gutil.log('(+)Webpack:'+key); 
      }); 
      gutil.log('(-)Webpack: '+stats.compilation.name); 
      if (done) { 
       done(); 
      } 
     } 
    } 
} 

// Watch specified files and define what to do upon file changes 
gulp.task('watch', function() { 
    //gulp.watch([srcPaths.app, srcPaths.js], ['app', 'js']); 
    gulp.watch([srcPaths.app, srcPaths.js], ['app', 'webpack']); 
}); 

// Define the default task so it will launch all other tasks 
//gulp.task('default', ['app', 'js', 'watch']); 
gulp.task('default', ['app', 'webpack', 'watch']); 

ガルプはWebPACKの実行と、あまりにもアプリのコードを展開します。デバッグのため。私はあなたの追加情報を読んで、WebpackはJSも縮小するためのプラグインを持っています。私の質問は私が正しい方法であるのですか？またはwebpackもデバッグの目的でアプリケーションコードをデプロイできますか？

Answer 1

コンパイルにはベルベルを使用しています。 Angular2はタイスクリプトで書かれています。アプリケーションをバンドルするには、ts-loaderまたはawesome-typescript-loaderを使用する必要があります。あなたのwebpack.configで

{ test: /\.ts$/, 
    loaders: ["awesome-typescript-loader"] 
} 

注： - ブラウザはtypescriptですが理解していないと、それは構文です。ブラウザに渡す前にJavaScriptにコンパイルする必要があります。また、動作させるためにはさらにいくつかの設定が必要です。 webpackにtsモジュールをコンパイルする方法を伝えるためにtsconfig.jsonが必要です。

{ 
    "compilerOptions": { 
    "module": "commonjs", 
    "noImplicitAny": false, 
    "removeComments": true, 
    "preserveConstEnums": true, 
    "sourceMap": true, 
    "target": "es5", 
    "experimentalDecorators": true, 
    "allowJs": false, 
    "allowUnreachableCode": false, 
    "allowUnusedLabels": false, 
    "suppressImplicitAnyIndexErrors": true, 
    "emitDecoratorMetadata": true 
    } 
} 

Readmore about it