我希望以 --watch
模式运行webpack,并在每次构建后运行一个shell命令,将一个文件夹同步到另一个文件夹。
我找到了这个插件,它可以在每次构建后触发一个事件。这很有效,但缺失的一块是如何从Javascript中触发一个shell命令(进行同步)。非常感谢关于如何实现这一目标的任何指针。
我希望以 --watch
模式运行webpack,并在每次构建后运行一个shell命令,将一个文件夹同步到另一个文件夹。
我找到了这个插件,它可以在每次构建后触发一个事件。这很有效,但缺失的一块是如何从Javascript中触发一个shell命令(进行同步)。非常感谢关于如何实现这一目标的任何指针。
截至今天(2018年4月11日),我尝试过的大多数插件都使用已弃用的API,导致出现此警告:
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
我很高兴发现您可以轻松地编写一个即席的webpack插件(文档)。
在您的webpack.config.js
文件中:
const exec = require('child_process').exec;
module.exports = {
// ... other config here ...
plugins: [
// ... other plugins here ...
{
apply: (compiler) => {
compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
exec('<path to your post-build script here>', (err, stdout, stderr) => {
if (stdout) process.stdout.write(stdout);
if (stderr) process.stderr.write(stderr);
});
});
}
}
]
};
如果您更愿意使用spawn
从脚本中获取实时或“活动”数据,则可以按照以下示例使用基本用法:
const spawn = require('child_process').spawn;
const child = spawn('<your script here>');
child.stdout.on('data', function (data) {
process.stdout.write(data);
});
child.stderr.on('data', function (data) {
process.stderr.write(data);
});
我也需要这样一件事情,所以我编写了一个超级简单的插件,在每次构建之前和之后执行shell命令。
'use strict';
var exec = require('child_process').exec;
function puts(error, stdout, stderr) {
console.log(stdout);
}
function WebpackShellPlugin(options) {
var defaultOptions = {
onBuildStart: [],
onBuildEnd: []
};
this.options = Object.assign(defaultOptions, options);
}
WebpackShellPlugin.prototype.apply = function(compiler) {
const options = this.options;
compiler.plugin("compilation", compilation => {
if(options.onBuildStart.length){
console.log("Executing pre-build scripts");
options.onBuildStart.forEach(script => exec(script, puts));
}
});
compiler.plugin("emit", (compilation, callback) => {
if(options.onBuildEnd.length){
console.log("Executing post-build scripts");
options.onBuildEnd.forEach(script => exec(script, puts));
}
callback();
});
};
module.exports = WebpackShellPlugin;
然后在您的webpack配置文件中:
plugins: [
new WebpackShellPlugin({
onBuildStart: ['echo "hello world"'],
onBuildEnd: ['echo "goodbye world"']
})
]
这很基础,不支持异步脚本。但它可以工作。随意根据您的需要进行修改。
请考虑遵循 MIT 许可证的代码。
需要 Node 4.x 或更高版本才能运行,因为我在这里使用了一些 ES6 特性。
after-emit
,因为 emit
是在 webpack 开始发出文件时触发的。 - Matt Zeunertexec
。 运行良好。 - jinglesthula使用方法:
const WebpackShellPlugin = require('webpack-shell-plugin');
module.exports = {
...
...
plugins: [
new WebpackShellPlugin({onBuildStart:['echo "Webpack Start"'], onBuildEnd:['echo "Webpack End"']})
],
...
}
class CustomPlugin {
constructor(name, command, stage = 'afterEmit') {
this.name = name;
this.command = command;
this.stage = stage;
}
static execHandler(err, stdout, stderr) {
if (stdout) process.stdout.write(stdout);
if (stderr) process.stderr.write(stderr);
}
apply(compiler) {
compiler.hooks[this.stage].tap(this.name, () => {
exec(this.command, CustomPlugin.execHandler);
});
}
}
new CustomPlugin('RunTest', 'jest', 'beforeRun'),
webpack-shell-plugin-next
插件有一个 webpack-shell-plugin-next
插件:
onAfterDone
插件 API:
onAfterDone
: 配置对象,用于在完成后执行脚本。
可以使用它来实现期望的与监视相关的行为(另外,请参见下面的重要说明):
我想在
--watch
模式下运行webpack,并在每次构建完成后运行一个shell命令,将一个文件夹与另一个文件夹同步。
重要说明: onAfterDone
插件 API 也会影响正常的构建模式(即没有 --watch
选项的 webpack
命令)。
这里有一个相关的 GitHub issue: onDoneWatch scripts executing before bundle written · Issue #16 · s00d/webpack-shell-plugin-next。
刚尝试使用该插件:效果很好。
devDependencies
(来自 package.json
)"devDependencies": {
"webpack": "5.3.2",
"webpack-cli": "4.1.0",
"webpack-shell-plugin-next": "2.0.4"
}
watch
npm运行脚本(来自package.json
)"scripts": {
"watch": "webpack --config webpack.config.js --watch"
}
webpack.config.js
)const WebpackShellPluginNext = require('webpack-shell-plugin-next');
module.exports = {
plugins: [
new WebpackShellPluginNext({
onAfterDone: {
scripts: ['echo "It works!"'],
blocking: true,
parallel: false
}
})
]
};
npm run watch
webpack-shell-plugin
和webpack-shell-plugin-next
时遇到了一些问题:尽管我使用了onDoneWatch
,但脚本在新文件被发出之前就已经执行了。webpack-shell-plugin
或使用webpack钩子的自定义实现。我无法让shell插件正常工作,而制作自定义插件似乎过于复杂。我发现了这个其他人没有提到的解决方案。希望它能有所帮助。 - Daniele Mazzotta
beforeCompile
。关于可用钩子的文档可以在 这里 找到。 - Guschmod +x /path/to/script
。 - jchook