Webpack Uncaught 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']);

Gulp将运行webpack并同时部署应用程序代码。用于调试目的。我阅读了你的其他信息，webpack也有一个插件来缩小JS。我的问题是我是否以正确的方式？或者webpack也可以部署应用程序代码以进行调试？

Answer 1

您正在使用babel进行编译。 Angular2是用typescript编写的。您需要使用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