我有一个使用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
文件时,都会触发新的构建。
index.js
文件,但是这会引起另一个问题。当我的脚本“更新”了index.js
的内容时,webpack将无法识别这些更改,就好像它没有更新一样。 - Yung Silvaindex.js
文件进行了命名导出,并且可以随着新组件/模块的创建或删除而更新,因此内容对于应用程序的运行非常重要。但是由于index.js
是动态生成的,因此无法触发新的构建。 - Yung Silva