做了个监听文件改动的webpack插件，监听 /assets/svg-icons 下的文件改动，自动执行 npm run svgicon
就不用每次新增icon都跑一遍脚本
文件一： 根目录下创建：build/icon-watcher.js
const fs = require('fs');
const path = require('path');
const {
exec
} = require('child_process');
let timer = null;
const watchDir = path.resolve(__dirname, '../assets/svg-icons');
const projectRoot = path.resolve(__dirname, '../');
class IconWatcherPlugin {
apply(compiler) {
compiler.hooks.afterEmit.tap('IconWatcherPlugin', () => {
console.log('zui-svg-icon 开始监听/assets/svg-icons文件改动')
fs.watch(watchDir, {
recursive: true
}, (eventType, filename) => {
if (filename) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log(`zui-svg-icon 改动类型: ${eventType}`);
console.log(`zui-svg-icon 文件名: ${filename}`);
exec('npm run svgicon', {
cwd: projectRoot
}, (error, stdout, stderr) => {
if (error) {
console.error(`zui-svg-icon exec error: ${error}`);
console.error(`zui-svg-icon stderr: ${stderr}`);
return;
}
console.log(`zui-svg-icon stdout: ${stdout}`);
});
}, 500)
}
});
});
}
}
module.exports = IconWatcherPlugin;
vue.config.js中引入
javascript
const IconWatcherPlugin = require('./build/icon-watcher');
module.exports = {
// ....
configureWebpack: {
plugins: [new IconWatcherPlugin()],
}
}
package.json中配置脚本
json
{
"scripts": {
"svgicon": "node ./uni_modules/zui-svg-icon/tools/generate-svg-icon.js"
}
}
