Question

我正在尝试使用webpack 2和typescript 2配置我的angular 2，并且我遇到了Duplicate Identifier错误。我已经搜索了多种解决方案，到目前为止还没有人帮助过。

错误：

    typings\globals\core-js\index.d.ts 
    `Duplicate identifier 'PropertyKey'
    typings\globals\core-js\index.d.ts 
   `Duplicate identifier 'Promise'
    typings\globals\es6-promise\index.d.ts 
    `Duplicate identifier 'Promise'
     typings\globals\es6-shim\index.d.ts 
    `Duplicate identifier 'PropertyKey'

我尝试将环境依赖项添加到我的typings.json文件中但没有成功，并且还试图完全删除globalDependencies并且只是保留ambientDependencies：

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "es6-collections": "registry:dt/es6-collections#0.5.1+20160316155526",
    "es6-promise": "registry:dt/es6-promise#0.0.0+20160614011821",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  },
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160215162030"
  }
}

我已经尝试排除tsconfig.json文件中的整个typings目录，但这会导致其他错误，例如：

node_modules\@angular\platform-browser\src\facade\collection.d.ts:8:8
Cannot find name 'Map'.

我当前的tsconfig.json如下：

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

我还尝试将以下内容添加到tsconfig.json的exclude数组中：

"browser"
"browser.d.ts"

最后，我的webpack.config.js如下：

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

module.exports = {
  context: path.resolve('app'),
  entry: {
    'app':'./main.ts'
  },
  output:{
    path: path.resolve('dist'),
    publicPath:'/',
    filename: 'bundle.js'
  },

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

  devtool:'module-inline-source-map',

  watch:true,

  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  },
  module:{
    loaders: [
      {
        test:/\.ts$/,
        exclude:/node_modules/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: "html"
      },
      {
        test: /\.css$/,
        exclude: path.resolve('app'),
        loader: ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: 'css-loader'})
      },
      {
        test: /\.css$/,
        include: path.resolve('app'),
        loader: 'raw'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file?name=fonts/[name].[hash].[ext]?'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader:'file'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader:'url?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader:'url?limit=10000&mimetype=image/svg+xml'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),

    new HtmlWebPackPlugin({
      template: path.resolve('app/index.html')
    }),

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

Angular 2版本：2.0.0-rc.6
打字稿版本：2.0.2
Webpack版本：2.1.0-beta.20

如果有人对此有任何见解，我将非常感谢您的帮助。

谢谢！

只是在Dave V提供答案后显示更改的更新：

以下文件夹已从typings目录中删除：

globals/es6-promise
globals/es6-shim
browser

输入root中的

index.d.ts删除了以下引用：

/// <reference path="globals/es6-promise/index.d.ts" />
/// <reference path="globals/es6-shim/index.d.ts" />

另外，我在tsconfig.json排除数组中添加了"typings/browser.d.ts"，因为它引用了es6-shim内的browser/ambient：

"exclude":[
    "node_modules",
    "typings/main",
    "typings/main.d.ts",
    "typings/browser.d.ts"
  ]

Answer 1

您无法使用es6-promise和core-js，因为它们都涵盖Promise概念，并且有自己的定义。您只需选择一个（如果您使用的是Angular，则建议使用core-js）。

重复的标识符错误 - 使用Angular 2和Typescript 2的Webpack 2配置

1 个答案: