webpack内の重複インポート

Question

私のwebpack.configの中で私はこのようなモジュールをインポートします。 codeSync、port、およびuiオプションを除いて、設定は実質的に同じです。すべてうまく動作しますが、Flow.js、ESLint、およびStandard.jsを使用しているので、重複するコードのインポートに関するエラーが発生しています。同じプラグインの二重インスタンスを作成する方法や、リンターの規則を変更することなくこれをインポートする方法はありますか？ 1つの設定を変更するために同じモジュールの2つのインスタンスを作成したり、2回インポートしたりする必要がないのが最善です。

import BrowserSyncPlugin from 'browser-sync-webpack-plugin' 
import BrowserSyncPluginMobile from 'browser-sync-webpack-plugin' 

module.exports = { 

... 

    plugins: [ 
     new BrowserSyncPlugin({ 
      host: 'localhost', 
      port: 3002, 
      ui: { 
      port: 3001 
      }, 
      proxy: 'http://localhost:3000/', 
      codeSync: false, 
      open: false 

     }), 
     new BrowserSyncPluginMobile({ 
      host: 'localhost', 
      port: 3004, 
      ui: { 
      port: 3003 
      }, 
      proxy: 'http://localhost:3000/', 
      codeSync: true, 
      open: false 
     }) 
    ] 

Answer 1

同じモジュールを2回インポートする理由はありません.Linterはインポートの重複について正しく警告しています。文字通り同じモジュールですが、2つの異なる名前に割り当てられています。

両方の名前がまったく同じモジュールを参照しているという事実に加えて、new operatorは、クラス（またはコンストラクタ関数）の新しいインスタンスを作成します。モジュールをもう一度インポートすると別のインスタンスが作成されると思った場合は、とにかく新しいインスタンスを作成するためにnewを使用することになるため、まったく必要ではありません。以下は、同じモジュールに対して2つの異なる名前を使用せずに、あなたが行ったことに相当します。

plugins: [ 
    new BrowserSyncPlugin({ 
    host: 'localhost', 
    port: 3002, 
    ui: { 
     port: 3001 
    }, 
    proxy: 'http://localhost:3000/', 
    codeSync: false, 
    open: false 
    }), 
    new BrowserSyncPlugin({ 
    host: 'localhost', 
    port: 3004, 
    ui: { 
     port: 3003 
    }, 
    proxy: 'http://localhost:3000/', 
    codeSync: true, 
    open: false 
    }) 
]