Fatal编程技术网
  • javascript/
  • Javascript 网页包开发服务器ES6 awesome typescript加载程序失败

Javascript 网页包开发服务器ES6 awesome typescript加载程序失败

javascript typescript

Javascript 网页包开发服务器ES6 awesome typescript加载程序失败,javascript,typescript,webpack-dev-server,Javascript,Typescript,Webpack Dev Server,我正在尝试启动webpack dev server并运行，在我启动了一个“hello world”Angular2应用程序之后，我没有开始对一个更大的应用程序进行更改。hello world测试和更大的应用程序之间的主要区别在于，我在我的tsconfig.json上针对ES6： { "compilerOptions": { "target": "es6", "module": "commonjs", "moduleResolution":

我正在尝试启动
webpack dev server
并运行，在我启动了一个“hello world”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"
    ]
}

{
   "globalDependencies": {
      "core-js": "registry:dt/core-js#0.9.0+20170324193834",
      "node": "registry:dt/node#7.0.0+20170322231424"
   }
}
这两个项目的其他包是相同的：

"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'
    })
  ]
};

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'
  }
});
以及
webpack.dev.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'
    })
  ]
};

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
：

{
    "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"
    ]
}

{
   "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');
}

// 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';
以及
vendor.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');
}

// 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'.
及

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

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

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

成功了