javascript - 如何在 webpack hook 中打破循环

Question

我正在处理一个 nuxt.js 项目，我需要在每个更改的文件(即每个 webpack 构建)上运行一个 shell 脚本。

所以我正在使用 Webpack Hooks

我创建了我的 Webpack Plugin

/plugins/NamedExports.js

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.js

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

echo "worked"

此脚本用于在组件目录中的每个文件夹中进行命名导出，例如

components/atoms/ButtonStyled.vue components/atoms/BoxStyled.vue

然后生成components/atoms/index.js

export { default as ButtonStyled } from "./ButtonStyled.vue"
export { default as BoxStyled } from "./BoxStyled.vue"

我在 nuxt.config.nuxt 或 webpack.config.js 中注册了我的插件

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

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

但是当我运行我的应用程序并更改任何文件时，服务器说已对 components/atoms/index.js 进行了更改，然后完成了新构建，因此它变得无限构建。

谁能帮我打破这个循环？

对于何时更改文件，只需生成新的 index.js 而不会生成无限构建

提前致谢

Answer 1

我创建了一个库并解决了我的问题，下面是链接:

Weback Plugin - named-exports