Webpack Uncaught SyntaxError: Неожиданный маркер импорта

Question

Chrome Dev инструменты показывает неперехваченным SyntaxError: Неожиданный маркер импорта после развертывания моего веб-приложение с WebPack. Это происходит в app.blundle.js, polyfills.bundle.js, vendor.bundle.js тоже. В качестве примера импортируйте строку {platformBrowserDynamic} из '@ angular/platform-browser. по адресу:

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