带有 WebPack 的 Javascript/Typescript 常量被调用两次答案

【问题标题】：Javascript/Typescript Constants with a WebPack called twice带有 WebPack 的 Javascript/Typescript 常量被调用两次
【发布时间】：2016-09-13 07:56:25
【问题描述】：

我有一个常量文件：

collections.ts

import {Mongo} from 'meteor/mongo';
import {Chat, Message} from 'api/models';

export const Chats = new Mongo.Collection<Chat>('chats');
export const Messages = new Mongo.Collection<Message>('messages');

我的问题是在运行时出现以下错误：

Error: There is already a collection named "chats"

原因是因为我有另外两个文件调用collections.ts 来访问Chats。

methods.ts

import {Chats, Messages} from './collections';

chats.ts

import {Chats, Messages} from 'api/collections';

问题

我该如何解决这个问题？我认为constants 可以被多次调用而无需重新实例化。

从 Chrome 开发者工具可以看到，它在运行时被调用了两次：

我认为我的问题是 webpack（我从 this tutorial 获得）正在创建两个 collections.ts。

webpack.config.js

var camelCase = require('lodash.camelcase');
var upperFirst = require('lodash.upperfirst');
var webpack = require('webpack');

var isRelease = process.argv.indexOf('--release') > -1;

var config = module.exports = {
  entry: './app/app.ts',
  output: {
    path: __dirname + '/www/build/js',
    filename: 'app.bundle.js'
  },
  watch: true,
  externals: [
    'cordova',
    resolveExternals
  ],
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
    alias: {
      api: __dirname + '/api/server'
    }
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },
  devtool: 'source-map'
};

if (isRelease) {
  config.plugins = [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false }
    })
  ];
}

function resolveExternals(context, request, callback) {
  return meteorPack(request, callback) ||
    cordovaPlugin(request, callback) ||
    callback();
}

function cordovaPlugin(request, callback) {
  var match = request.match(/^cordova\/(.+)$/);
  var plugin = match && match[1];

  if (plugin) {
    plugin = camelCase(plugin);
    plugin = upperFirst(plugin);
    callback(null, 'window.cordova && cordova.plugins && cordova.plugins.' + plugin);
    return true;
  }
}

function meteorPack(request, callback) {
  var match = request.match(/^meteor\/(.+)$/);
  var pack = match && match[1];

  if (pack) {
    callback(null, 'window.Package && Package["' + pack + '"]');
    return true;
  }
}

Here 是有同样问题的人。但我仍然不确定如何解决它。在app.bundle.js我可以找到类似的代码来修改，但这是生成的代码，所以看不出这有什么帮助。

【问题讨论】：

你能检查一下 Meteor 没有尝试加载 TypeScript 和转译的 JavaScript 文件吗？您的 IDE 是否正在编译您的 TS？在这种情况下，您最好删除已转译的 JS，因为您不需要它们并导致重复代码。
嗨，阿伦，谢谢您的回复。请原谅我的无知，但我不确定。如何判断 IDE（Visual Studio 代码）是否将 TS 代码转换为 JS？我也不确定在哪里删除？我确实尝试过删除app.bundle.js.map，因为它似乎有一个名为collections.ts 的代码，但它只是再次重新生成。我正在运行 Ionic2 和 Meteor，所以可能是 ionic serve 生成了文件。
最简单的测试方法是在collections.ts中添加一个console.log，看看它是否多次出现在命令行中。
是的（如果 console.log 在第二次失败的导出上方）。我还可以从 Chrome 开发工具中得知，它在那里遇到了两次断点。堆栈跟踪表明它来自上面的两个导入。
你认为它为什么会创建两个collections.ts？我确定这是我的问题。我正在使用webpack（我不太明白），因为我正在学习本教程：angular-meteor.com/tutorials/whatsapp2/ionic/setup

标签： javascript node.js typescript

【解决方案1】：

解决方案：

通过将node_modules 设为符号链接，即只有一个node_modules，修复了此问题。

【讨论】：