的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