我正在使用nuxt.js项目,我需要在每个更改的文件(即每个Webpack构建)上运行Shell脚本。
所以我正在使用Webpack挂钩
我创建了Webpack插件
/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而不生成无限构建
提前致谢
问题显然是新文件重新触发了构建。从概念上讲,有几种解决方法。
1)如果文件已更新,请不要输出新文件。您需要为此比较时间戳。可能会很混乱。
2)写一个加载器。Match
components/**/index.js
,为其输出正确的javascript。确保无状态。即不输出另一个文件,只是一个字符串。然后将虚拟文件放在每个目录中,并带有注释,该注释由webpack插件自动生成。
如果您的虚拟文件告诉webpack如何生成它,那就更好了。
https://webpack.js.org/contribute/writing-a-loader/