防止文件生成新的构建 - Webpack

3

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

我创建了一个Webpack插件,使得每次文件被修改时,会在某个目录下生成一个index.js文件。

问题在于当index.js被生成后,Webpack会将其视为新的更改并重新构建,这样就陷入了无限循环...

为了检测更改,我正在使用Webpack钩子

compiler.hooks.beforeCompile.tapAsync('MyPlugin', (params, callback) => {
  // script to generate an index.js in a given directory
});

如何防止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'

但是手动完成这项工作可能会是一项非常繁琐的任务。每次创建、删除或重命名组件时,您都需要更新相应文件夹中的 index.js

因此,我开始开发一个解决方案。

nuxt.config.js 中:

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

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

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.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 文件时,都会触发新的构建。

2个回答

2

我已经尝试过这个选项,可以让webpack停止观察index.js文件,但是这会引起另一个问题。当我的脚本“更新”了index.js的内容时,webpack将无法识别这些更改,就好像它没有更新一样。 - Yung Silva
1
哦...也许我误解了问题。为了确保我们理解正确并尝试更好地回答,让我问一下。您是说您希望 WebPack 检测文件的内容更改,但如果文件被替换(即创建了一个具有相同名称和大小的新文件),则忽略该文件吗? - iHazCode
这正是我所需要的。index.js文件进行了命名导出,并且可以随着新组件/模块的创建或删除而更新,因此内容对于应用程序的运行非常重要。但是由于index.js是动态生成的,因此无法触发新的构建。 - Yung Silva
1
很遗憾,我不熟悉任何可以直接提供您所需行为的观察选项。也许其他人有一些想法。但是,如果您愿意分享更多信息,例如插件何时被触发,我们可能可以从另一个角度来解决这个问题。根据我所了解的情况,这似乎主要是在开发时出现的问题?无论如何,我们可以通过时间和排列更新来解决这个问题。或者利用您的索引文件作为指向生成文件的链接并将其排除在外。 - iHazCode
非常感谢您的关注,我非常高兴,我将急切地等待,我已经尝试了几天来解决这个问题。 - Yung Silva
显示剩余6条评论

0

我使用一个只运行一次的钩子,并使用 chokidar 监听组件目录中的更改

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

我把这个变成了一个库,也许能帮助其他人

Weback插件 - 命名导出


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接