Javascript 阻止文件生成新生成-网页包

我有一个带有nuxt.js/Vue的应用程序

我创建了一个Webpack插件，以便在每个文件更改后，在特定目录中生成一个

index.js

问题是，当生成

index.js

时，Webpack会将其识别为新的更改并重新构建，因此它会停留在无限循环中

要检测更改，我使用

如何防止

index.js

触发新生成

更新问题以便更好地理解

我正在使用vue.js | nuxt.js和这个组件结构开发一个应用程序

├── components
│   ├── quarks
│   │   └── ...
│   ├── bosons
│   │   └── GridLayout.vue
│   │   └── ...
│   ├── atoms
│   │   └── ButtonStyle.vue
│   │   └── InputStyle.vue
│   │   └── ...
│   ├── molecules
│   │   └── ...
│   ├── organisms
│   │   └── ...
│   ├── templates
│   │   └── ...
└─────

我需要进行命名和分组导入，如下所示：

import { ButtonStyle, InputStyle } from '@/components/atoms/'

但是为了解决这个问题，我需要在每个文件夹中都有一个index.js来逐个导出组件，例如

├── components
│   ├── atoms
│   │   └── ButtonStyle.vue
│   │   └── InputStyle.vue
│   │   └── index.js
└─────

在

index.js中

export { default as ButtonStyled } from './ButtonStyled.vue'
export { default as InputStyle } from './InputStyle.vue'

import NamedExports from './plugins/NamedExports.js'

export default {
  // ... other config here ...
  build: {
    plugins: [
      new NamedExports()
    ],
  }
}

const pluginName = 'NamedExports'
const { exec } = require('child_process')

class NamedExports {
  apply(compiler) {
    compiler.hooks.beforeCompile.tap(pluginName, (params, callback) => {
      exec('sh plugins/shell.sh', (err, stdout, stderr) => {
        console.log(stdout)
        console.log(stderr)
      })
    })
  }
}

export default NamedExports

但是手工完成这项工作可能是一项非常烦人的任务。每次创建、删除、重命名组件时，都必须更新相应文件夹的
index.js

所以我开始制定一个解决方案

在
numxt.config.js中

export { default as ButtonStyled } from './ButtonStyled.vue'
export { default as InputStyle } from './InputStyle.vue'

import NamedExports from './plugins/NamedExports.js'

export default {
  // ... other config here ...
  build: {
    plugins: [
      new NamedExports()
    ],
  }
}

const pluginName = 'NamedExports'
const { exec } = require('child_process')

class NamedExports {
  apply(compiler) {
    compiler.hooks.beforeCompile.tap(pluginName, (params, callback) => {
      exec('sh plugins/shell.sh', (err, stdout, stderr) => {
        console.log(stdout)
        console.log(stderr)
      })
    })
  }
}

export default NamedExports

在
plugins/NamedExports.js中

export { default as ButtonStyled } from './ButtonStyled.vue'
export { default as InputStyle } from './InputStyle.vue'

import NamedExports from './plugins/NamedExports.js'

export default {
  // ... other config here ...
  build: {
    plugins: [
      new NamedExports()
    ],
  }
}

const pluginName = 'NamedExports'
const { exec } = require('child_process')

class NamedExports {
  apply(compiler) {
    compiler.hooks.beforeCompile.tap(pluginName, (params, callback) => {
      exec('sh plugins/shell.sh', (err, stdout, stderr) => {
        console.log(stdout)
        console.log(stderr)
      })
    })
  }
}

export default NamedExports

plugins/shell.sh

parameters=$(ls components)
for item in ${parameters[*]}
do
    ls components/$item/ | grep -v index.js | sed 's#^\([^.]*\).*$#export { default as \1 } from "./&"#' > components/$item/index.js
done

但是每当插件创建一个
index.js
，就会触发一个新的构建
您是否已将新文件/目录添加到WebPacks排除列表中？如果不是，watchOptions.ignore属性可能正是您要查找的：

希望这有帮助
我使用一个只运行一次的钩子，并使用
chokidar
来侦听components目录中的更改

compiler.hooks.entryOption.tap('MyPlugin', (context, entry) => {
  // generates index.js
  // Watch a directory with chokidar 
});

我把它变成了图书馆，也许它能帮助其他人

我已经尝试过这个选项，我可以让网页包停止观察
index.js
，但这会导致另一个问题。当我的脚本
更新
index.js
的内容时，网页将无法识别这些更改，就好像它没有更新一样。嗯。。。也许我当时误解了这个问题。为了让我们能够正确地理解并尝试更好地回答我的问题。您的意思是希望WebPack检测文件的内容更改，但如果文件被替换，则忽略该文件（即创建具有相同名称和大小的新文件）？这正是我需要的。
index.js
文件进行命名导出，并且可以在创建或删除新组件/模块时进行更新，因此内容对于应用程序的操作非常重要。但是index.js是动态生成的，因此不可能启动新的构造。不幸的是，我不熟悉一个监视选项，它可以提供您想要的开箱即用的行为。也许其他人有一些想法。然而，如果您愿意分享更多的信息，比如当您的插件被触发时，我们可以从另一个向量来处理这个问题。根据我所学到的一点，这听起来似乎主要是开发时的一个问题？在任何情况下，我们都可以通过时间和安排更新来解决这个问题。或者利用您的索引文件作为指向生成文件的链接，并排除这些文件。我更新了我的问题，以便更好地理解我的问题，如果您可以阅读，请放心