node.js - webpack typescript2.x 出现Duplicate identifier错误

问题描述

问 题

工程来源：https://github.com/angular/universal/tree/master/examples/express

在使用webpack时出现Duplicate identifier错误

> npm run copy:index && npm run webpack -- --progress                                                           [0] Hash: 2aaccc3df3ea202366b248e9b4435cb430049f5b
Version: webpack 2.1.0-beta.22
Child
    Hash: 2aaccc3df3ea202366b2
    Version: webpack 2.1.0-beta.22
    Time: 10206ms
                           Asset     Size  Chunks             Chunk Names
        public/browser-bundle.js  2.69 MB       0  [emitted]  main
    public/browser-bundle.js.map  2.65 MB       0  [emitted]  main
     [335] ./src async 160 bytes {0} [built]
        + 617 hidden modules

    ERROR in [default] C:\workspace\node\express\node_modules\.2.0.2@typescript\lib\lib.es6.d.ts:4133:13
    Duplicate identifier 'PropertyKey'.

    ERROR in [default] C:\workspace\node\express\node_modules\.6.0.52@@types\node\index.d.ts:102:5
    Duplicate identifier 'BufferEncoding'.

    ERROR in [default] C:\workspace\node\express\node_modules\.6.0.52@@types\node\index.d.ts:263:17
    Duplicate identifier 'EventEmitter'.

    ERROR in [default] C:\workspace\node\express\node_modules\.6.0.52@@types\node\index.d.ts:553:25
    Duplicate identifier 'Buffer'.

    ERROR in [default] C:\workspace\node\express\node_modules\.6.0.52@@types\node\index.d.ts:553:49
    Duplicate identifier 'SlowBuffer'.

    ERROR in [default] C:\workspace\node\express\node_modules\.6.0.52@@types\node\index.d.ts:597:4
    Duplicate identifier 'export='.

    ERROR in [default] C:\workspace\node\express\node_modules\.6.0.52@@types\node\index.d.ts:742:17
    Duplicate identifier 'Agent'.

    ERROR in [default] C:\workspace\node\express\node_modules\.6.0.52@@types\node\index.d.ts:800:17
    Duplicate identifier 'Worker'.

    ERROR in [default] C:\workspace\node\express\node_modules\.6.0.52@@types\node\index.d.ts:1481:16
    Duplicate identifier 'CompleterResult'.

    ERROR in [default] C:\workspace\node\express\node_modules\.6.0.52@@types\node\index.d.ts:1518:17
    Duplicate identifier 'Script'.

    ERROR in [default] C:\workspace\node\express\node_modules\.6.0.52@@types\node\index.d.ts:2470:21
    .
    .
    .

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": true,
    "sourceRoot": "src",
    "target": "es6",
    "types": [
      "node",
      "core-js",
      "express"
    ],
    "baseUrl": "."
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true,
    "forkChecker": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');
var clone = require('js.clone');

var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
var DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
var ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
var TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;
var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;

var sharedPlugins = [
  // new DedupePlugin(),
  // new UglifyJsPlugin({
  //   // beautify: true, //debug
  //   // mangle: false, //debug
  //   // mangle: true, //prod
  //   compress: {
  //     screw_ie8: true,
  //     keep_fnames: true,
  //     // drop_debugger: false,
  //     // dead_code: true,
  //     // unused: true
  //   },
  //   comments: false,
  // }),
  new ContextReplacementPlugin(
    // The (\\|\/) piece accounts for path separators in *nix and Windows
    /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
    root('./src')
  ),
  new TsConfigPathsPlugin({
    tsconfig: 'tsconfig.json'
  }),
  new ForkCheckerPlugin()
];
var webpackConfig = setTypeScriptAlias(require('./tsconfig.json'), {
  cache: true,

  devtool: 'source-map',

  output: {
    filename: '[name]-bundle.js',
    path: './dist',
  },

  module: {
    preLoaders: [
      // fix angular2
      {
        test: /(systemjs_component_resolver|system_js_ng_module_factory_loader)\.js$/,
        loader: 'string-replace-loader',
        query: {
          search: '(lang_1(.*[\\n\\r]\\s*\\.|\\.))?(global(.*[\\n\\r]\\s*\\.|\\.))?(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import',
          replace: 'System.import',
          flags: 'g'
        }
      },
      {
        test: /.js$/,
        loader: 'string-replace-loader',
        query: {
          search: 'moduleId: module.id,',
          replace: '',
          flags: 'g'
        }
      }
      // end angular2 fix
    ],
    loaders: [
      // .ts files for TypeScript
      { 
        test: /\.(js|ts)$/, 
        loaders: ['awesome-typescript-loader', 'angular2-template-loader'], 
        exclude: [/node_modules/]
      },
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.css$/, loader: 'raw-loader' }
    ],
    postLoaders: [
      {
        test: /\.js$/,
        loader: 'string-replace-loader',
        query: {
          search: 'var sourceMappingUrl = extractSourceMappingUrl\\(cssText\\);',
          replace: 'var sourceMappingUrl = "";',
          flags: 'g'
        }
      }
    ]

  },

  plugins: [
    // don't define plugins here. define them above in shared plugins
  ],

  resolve: {

    // packageMains: ['jsnext:main', 'main', 'jsnext:browser', 'browser', 'jsnext:main'],

    extensions: ['', '.ts', '.js', '.json'],

    alias: {
      // 'rxjs': root('node_modules/rxjs-es'),
      // '@angular/common': root('node_modules/@angular/common/esm'),
      // '@angular/compiler': root('node_modules/@angular/cpmiler/esm'),
      // '@angular/core': root('node_modules/@angular/core/esm'),
      // '@angular/forms': root('node_modules/@angular/forms/esm'),
      // '@angular/http': root('node_modules/@angular/http/esm'),
      // '@angular/platform-browser': root('node_modules/@angular/platform-browser/esm'),
      // '@angular/platform-browser-dynamic': root('node_modules/@angular/platform-browser-dynamic/esm'),
      // '@angular/platform-server': root('node_modules/@angular/platform-server/esm'),

    }

  },

})

module.exports = [
  plugins(sharedPlugins, require('./webpack.config-browser')(clone(webpackConfig))),
  plugins(sharedPlugins, require('./webpack.config-server')(clone(webpackConfig))),
]


function plugins(plugins, config) {
  config.plugins = config.plugins.concat(plugins);
  return config
}


function setTypeScriptAlias(tsConfig, config) {
  var newConfig = clone(config);
  newConfig = newConfig || {};
  newConfig.resolve = newConfig.resolve || {};
  newConfig.resolve.alias = newConfig.resolve.alias || {};
  var tsPaths = tsConfig.compilerOptions.paths;
  for (var prop in tsPaths) {
    newConfig.resolve.alias[prop]  = root(tsPaths[prop][0]);
  }
  return newConfig;
}

function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

在build后发现node_modules下面目录结构发生变化:

下面那个@types/node变成了一个Link文件，链向上面那个.6.0.52@@types/node，是不是这个原因引起的呢？要怎么解决呢？还是我的tsconfig.json或webpack配置有问题呢？

解决方案

解决了
修改tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": true,
    "sourceRoot": "src",
    "target": "es5",
    "types": [
      "node",
      "core-js",
      "express"
    ],
    "baseUrl": "."
  },
  "include": [
      "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true,
    "forkChecker": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

这篇关于node.js - webpack typescript2.x 出现Duplicate identifier错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！