Plugins 网页内重复导入

Plugins 网页内重复导入,plugins,import,webpack,Plugins,Import,Webpack,在我的webpack.config中,我导入了这样一个模块。除了codeSync、端口和ui选项之外,配置实际上是相同的。一切正常,但由于我使用Flow.js、ESLint和Standard.js,我得到了一个关于重复代码导入的错误。有没有一种方法可以在不改变linter规则的情况下创建同一插件的两个实例或导入此插件。如果我不必为了更改一个设置或导入两次而创建同一模块的两个实例,那将是最好的 import BrowserSyncPlugin from 'browser-sync-webpack-

在我的webpack.config中,我导入了这样一个模块。除了codeSync、端口和ui选项之外,配置实际上是相同的。一切正常,但由于我使用Flow.js、ESLint和Standard.js,我得到了一个关于重复代码导入的错误。有没有一种方法可以在不改变linter规则的情况下创建同一插件的两个实例或导入此插件。如果我不必为了更改一个设置或导入两次而创建同一模块的两个实例,那将是最好的

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
        })
    ]

没有理由导入同一个模块两次,并且您的linter正确地警告您重复导入。它们实际上是同一个模块,但分配给两个不同的名称

除了两个名称引用完全相同的模块之外,还创建了类(或构造函数)的新实例。如果您认为第二次导入模块会创建一个不同的实例,情况并非如此,但也完全没有必要,因为您最终还是使用
new
创建了一个新实例。以下内容与您所做的相同,没有为同一模块使用两个不同的名称

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
  })
]

谢谢你,迈克尔。是的,经过一番思考后,我终于这样做了。有没有一种方法可以进一步减少这个问题,把它放在同一个新的BrowserSyncPlugin实例下?我不这么认为。这个插件将这些选项转发给BrowersSync,看起来你不能一次定义多个端口(根据它必须是一个数字)。我只会发表评论,然后解释为什么我们要使用其中的两个。谢谢