Question

我正在为下面的项目提供设置 -

.babelrc -

{
  "presets": ["es2015", "stage-0"]
}

Package.Json -

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "angular2": "^2.0.0-beta.11",
    "es6-promise": "latest",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "latest",
    "zone.js": "^0.6.6"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^0.16.2",
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-stage-0": "^6.5.0",
    "webpack": "^1.12.14"
  },
  "scripts": {},
  "author": "",
  "license": "ISC"
}

Webpack.config.js -

var path = require('path'),
  webpack = require('webpack'),
  ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;


module.exports = {
  devtool: 'eval-source-map',
  entry: {
    main: [
      './src/app'
    ]
  },
  output: {
    filename: './[name].js',
    path: path.join(__dirname, 'public'),
    publicPath: '/public/'
  },
  resolve: {

    // An array of extensions that should be used to resolve modules.
    //
    // See: http://webpack.github.io/docs/configuration.html#resolve-extensions
    extensions: ['', '.ts', '.js'],

    // Make sure root is src
    root: path.join(__dirname, 'src'),

  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ForkCheckerPlugin(),
  ],
  module: {
    loaders: [{
      test: /\.js?$/,
      exclude: path.join(__dirname, 'src'),
      loaders: ['babel']
    }, {
      test: /\.ts$/,
      loader: 'awesome-typescript-loader',
      exclude: [/\.(spec|e2e)\.ts$/]
    }, ],
  }
}

root.component.js -

import {
  Component
}
from 'angular2/core';


@Component({
  selector: "my-app",
  template: '<h1>hello Joy</h1>'
})

export class RootComponent {
  constructor() {

  }
}

当我运行web pack的命令时。它给我下面的错误 -

ERROR in ./src/app.js
Module parse failed: /Users/Joy/Documents/Work/Javascript/Angular-quickstart/src/app.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import bootstrap from 'angular2/platform/browser';
| import RootComponent from './components/root.component';
| 
 @ multi main

任何人都知道为什么这对我造成了影响。它与反应应用程序的设置几乎相同。这只适用于angular2.0而没有反应。 IT应该表现得一样。

Answer 1

loaders: [{
  test: /\.js?$/,
  exclude: path.join(__dirname, 'src'),
  loaders: ['babel']

实际上你需要完全针对src的babel，你将它排除在外。应该是如此：

loaders: [{
  test: /\.js$/,
  loader: 'babel',
  exclude: /node_modules|bower_components/
}

Angular 2带有网页包和ES6

1 个答案: