将异步加载的数据传递给 webpack 中的 pug-html-loader
Pass asynchronously loaded data to pug-html-loader in webpack
常规设置
我正在使用 webpack 和 pug 基于这个很棒的样板构建一个小型网站:
https://github.com/alexnoz/webpack-pug-scss-boilerplate.git
项目已启动 运行,我能够正确渲染 pug 文件。
要求
现在我需要在所有 webpack 编译发生之前加载一些数据。我想将该数据传递给 pug-html-loader,如 .
中所述
Problem/Question
我的问题是,我必须异步加载该数据。所以我有一个承诺。我如何确保承诺在 在 webpack 编译发生之前完成?
这是我目前无法使用的方法
// in webpack.config.js
var myData = []
loadSomeDataAsync().then(loadedData => myData = loadedData)
{
loader: 'pug-html-loader',
options: {
data: myData // <====
}
}
pug-html-loader
接受 options.data
如果我把静态数据放在那里,那么这个数据在 pug 模板中可用。
我知道我的问题似乎是,在 webpack 编译发生之前,我的 Promise 尚未解决。但是如何让 webpack 以某种方式 "wait" 来解决 Promise?
我已经尝试注册 webpack 事件挂钩。但没有成功。还有什么建议吗?
这种情况下的默认模式如下:
const configPromise = new Promise(function(resolve, reject) {
setTimeout(() => { resolve(webpackConfig) }, 1000);
});
configPromise
.then(webpack) // Passes the config to webpack
.then(compiler => {
// Do the work with the compiler
});
此功能在 DOCS 中有详细记录。
Webpack will run the function exported by the configuration file and
wait for a Promise to be returned. Handy when you need to
asynchronously load configuration variables.
module.exports = () => {
return new Promise((resolve, reject) => { // The promise could be an XHR call using fetch, Axios or whatever
setTimeout(() => {
resolve({ // Resolve webpack config
entry: './app.js',
/* ... */
});
}, 5000);
});
};
就这么简单:
module.exports = () => {
return loadSomeDataAsync().then(function(loadedData) {
return {
entry: './app.js',
...
options {
data: loadedData
}
...
}
});
};
请注意,文档中的 setTimeout() 仅用于说明目的(模拟获取数据时的延迟)。
等的怎么样?在内部,他们必须使用 async + await。
例如,为了帮助您更好地理解,请看这段代码(同样,出于说明目的):
function simulateLoadData() {
return new Promise(resolve => {
setTimeout(() => {
resolve("data"); // once I get the data, I pass it through resolve
}, 2000); // just for illustration purposes and simulate query to remote machine
});
}
function getConfig() {
return simulateLoadData().then(function(dataLoaded){ // here I retrieve the data resolved
return { data: dataLoaded }; // I can pass dataLoaded to my config
});
}
async function app() {
var config = await getConfig(); // here is where I retrieve the returned config
console.log("config", config); // config > Object { data: "data" }
}
app();
常规设置
我正在使用 webpack 和 pug 基于这个很棒的样板构建一个小型网站: https://github.com/alexnoz/webpack-pug-scss-boilerplate.git
项目已启动 运行,我能够正确渲染 pug 文件。
要求
现在我需要在所有 webpack 编译发生之前加载一些数据。我想将该数据传递给 pug-html-loader,如
Problem/Question
我的问题是,我必须异步加载该数据。所以我有一个承诺。我如何确保承诺在 在 webpack 编译发生之前完成?
这是我目前无法使用的方法
// in webpack.config.js
var myData = []
loadSomeDataAsync().then(loadedData => myData = loadedData)
{
loader: 'pug-html-loader',
options: {
data: myData // <====
}
}
pug-html-loader
接受 options.data
如果我把静态数据放在那里,那么这个数据在 pug 模板中可用。
我知道我的问题似乎是,在 webpack 编译发生之前,我的 Promise 尚未解决。但是如何让 webpack 以某种方式 "wait" 来解决 Promise?
我已经尝试注册 webpack 事件挂钩。但没有成功。还有什么建议吗?
这种情况下的默认模式如下:
const configPromise = new Promise(function(resolve, reject) {
setTimeout(() => { resolve(webpackConfig) }, 1000);
});
configPromise
.then(webpack) // Passes the config to webpack
.then(compiler => {
// Do the work with the compiler
});
此功能在 DOCS 中有详细记录。
Webpack will run the function exported by the configuration file and wait for a Promise to be returned. Handy when you need to asynchronously load configuration variables.
module.exports = () => {
return new Promise((resolve, reject) => { // The promise could be an XHR call using fetch, Axios or whatever
setTimeout(() => {
resolve({ // Resolve webpack config
entry: './app.js',
/* ... */
});
}, 5000);
});
};
就这么简单:
module.exports = () => {
return loadSomeDataAsync().then(function(loadedData) {
return {
entry: './app.js',
...
options {
data: loadedData
}
...
}
});
};
请注意,文档中的 setTimeout() 仅用于说明目的(模拟获取数据时的延迟)。
等的怎么样?在内部,他们必须使用 async + await。
例如,为了帮助您更好地理解,请看这段代码(同样,出于说明目的):
function simulateLoadData() {
return new Promise(resolve => {
setTimeout(() => {
resolve("data"); // once I get the data, I pass it through resolve
}, 2000); // just for illustration purposes and simulate query to remote machine
});
}
function getConfig() {
return simulateLoadData().then(function(dataLoaded){ // here I retrieve the data resolved
return { data: dataLoaded }; // I can pass dataLoaded to my config
});
}
async function app() {
var config = await getConfig(); // here is where I retrieve the returned config
console.log("config", config); // config > Object { data: "data" }
}
app();