Webpack Uncaught SyntaxError：意外的令牌导入

Question

Chrome 开发工具显示 Uncaught SyntaxError: Unexpected token import after 使用 webpack 部署我的 web 应用程序。它也在 app.blundle.js、polyfills.bundle.js、vendor.bundle.js 中发生。作为示例行 import { platformBrowserDynamic } from '@angular/platform-b​​rowser.在：

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']
                }
            },
    ...

Gulp 文件

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 是用打字稿编写的。您需要使用 ts-loader 或 awesome-typescript-loader 来捆绑您的应用程序。 在你的 webpack.config 中

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

注意：- 浏览器不理解 typescript 及其语法。您需要先将其编译为 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