的WebPack未捕獲的SyntaxError：意外的令牌進口

Question

Chrome瀏覽器開發工具是顯示未捕獲的SyntaxError：意外的令牌進口 後的WebPack部署我的web應用程序。它發生在app.blundle.js，polyfills.bundle.js，vendor.bundle.js中。作爲來自'@ angular/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

您正在使用babel進行編譯。 Angular2是用打字稿寫的。您需要使用ts-loader或awesome-typescript-loader來捆綁您的應用程序。 在webpack.config

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

注： - 瀏覽器不明白打字稿和它的語法。您需要先將其編譯爲JavaScript，然後才能將其提供給瀏覽器。您還需要更多配置才能使其工作。你需要一個tsconfig.json來告訴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