Webpack dev服务器失败ES6 awesome-typescript-loader

时间：2017-04-18 23:06:00

标签： javascript typescript webpack-dev-server

我试图让webpack-dev-server启动并运行，并在我得到一个＆＃34; hello world＆＃34; Angular2应用程序工作我没有开始实施更大的应用程序的更改。 hello world测试和更大的应用程序之间的主要区别在于我在tsconfig.json上定位ES6：

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    },
    "exclude":[
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

两个项目的其他软件包都是相同的：

"scripts": {
    "start": "webpack-dev-server --inline --progress --port 10100",
  },
  "author": "me",
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "^4.0.2",
    "@angular/common": "^4.0.2",
    "@angular/compiler": "^4.0.2",
    "@angular/core": "^4.0.2",
    "@angular/forms": "^4.0.2",
    "@angular/http": "^4.0.2",
    "@angular/platform-browser": "^4.0.2",
    "@angular/platform-browser-dynamic": "^4.0.2",
    "@angular/router": "^4.0.2",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.23",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "rxjs": "^5.3.0",
    "tether": "^1.4.0",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.2",
    "babili-webpack-plugin": "0.0.11",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.1",
    "style-loader": "^0.16.1",
    "to-string-loader": "^1.1.5",
    "typescript": "^2.2.2",
    "typings": "^2.1.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2",
    "webpack-merge": "^4.1.0"
  }

我的webpack.common.js：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { 
              configFileName: '../tsconfig.json' 
            }
          }, 
          'angular2-template-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        loaders: ['to-string-loader', 'css-loader']
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),

    new webpack.ProvidePlugin({
      'jQuery': 'jquery',
      'window.jQuery': 'jquery',
      'Tether': 'tether',
      'window.Tether': 'tether'
    })
  ]
};

和webpack.dev.js：

const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const commonConfig = require('./webpack.common.js');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',

  output: {
    publicPath: 'http://localhost:10100/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },

  plugins: [
    new ExtractTextPlugin('[name].css')
  ],

  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});

我已获得以下typings.json：

{
   "globalDependencies": {
      "core-js": "registry:dt/core-js#0.9.0+20170324193834",
      "node": "registry:dt/node#7.0.0+20170322231424"
   }
}

我认为main.ts非常简单：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';

if (process.env.ENV === 'production') {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

polyfills.ts：

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

if (process.env.ENV !== 'production' && process.env.ENV !== 'staging') {
  // Development and test
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');
}

vendor.ts：

// Angular
import '@angular/animations';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
import '@angular/forms';

// RxJS
import 'rxjs';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import '@ng-bootstrap/ng-bootstrap';
import 'jquery';
import 'tether';
import 'bootstrap';

我知道我必须导入bootstrap.css和font-awesome个css文件，但我认为不应该阻止网站加载。我得到的错误与重复的标识符有关或无法加载某些模块。一些例子是：

client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:2684:22 
    TS2451: Cannot redeclare block-scoped variable 'S_IWOTH'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:2687:22 
    TS2451: Cannot redeclare block-scoped variable 'S_IXOTH'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:2911:18 
    TS2300: Duplicate identifier 'TLSSocket'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:3285:10 
    TS2300: Duplicate identifier 'Utf8AsciiLatin1Encoding'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:3286:10 
    TS2300: Duplicate identifier 'HexBase64Latin1Encoding'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:3287:10 
    TS2300: Duplicate identifier 'Utf8AsciiBinaryEncoding'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ./typings/globals/node/index.d.ts:3288:10 
    TS2300: Duplicate identifier 'HexBase64BinaryEncoding'.

和

[at-loader] ..\carlos\node_modules\@angular\platform-browser\animations\src\animation_renderer.d.ts:1:53 
    TS2307: Cannot find module '@angular/animations/browser'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ..\carlos\node_modules\@angular\platform-browser\animations\src\providers.d.ts:8:276 
    TS2307: Cannot find module '@angular/animations/browser'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ..\carlos\node_modules\@angular\router\upgrade\src\upgrade.d.ts:9:31 
    TS2307: Cannot find module '@angular/upgrade/static'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ..\carlos\node_modules\awesome-typescript-loader\dist\checker\checker.d.ts:1:1 
    TS2688: Cannot find type definition file for 'node'.
errors @ client?06f2:119
sock.onmessage @ socket.js?e5d0:37
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35
wrapFn @ zone.js?fad3:1199
ZoneDelegate.invokeTask @ zone.js?fad3:398
Zone.runTask @ zone.js?fad3:165
ZoneTask.invoke @ zone.js?fad3:460
client?06f2:119 [at-loader] ..\carlos\node_modules\awesome-typescript-loader\dist\checker\send.d.ts:1:1 
    TS2688: Cannot find type definition file for 'node'.

如果我的目标是ES5，那么我会得到17个与HTML模板相关的错误，但没有什么真正重要的，所以我想知道我是否必须在ES6上使用另一个加载程序？

1 个答案:

答案 0 :(得分：0)

我更改了webpack.common.js以下内容：

options: { 
              configFileName: '../tsconfig.json' 
            }

到

options: { 
              configFileName: 'tsconfig.json' 
            }

它有效！

相关问题
最新问题