[英]How to replace the deprecated javascriptEnabled option in less-loader with a new plugin
我需要为我的less文件使用内联js,以前有一个webpack配置,这样可以启用内联js:
module.exports = {
...
module: {
...
rules: [
...
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'less-loader',
options: { javascriptEnabled: true },
},
],
},
],
},
};
但是javascriptEnabled
选项已被弃用,替代它的是使用@plugin
语法并使用 js 插件。 但是,我对文档以及如何准确实现插件以及应该在我的 webpack 配置中实现哪个插件来替换这个现在已弃用的选项感到有点困惑,所以我仍然可以使用内联 js。 我怎么能 go 关于这样做? 谢谢。
出于安全考虑,已弃用内联 javascript。 它容易受到代码注入的影响。 因此强烈建议不要使用内联 javascript。
如果您真的想那么糟糕地使用它,您可以使用不推荐使用javascriptEnabled
之前的旧版本,但我认为答案太简单了。 所以这就是这个。
我做了一些研究,我猜你从这个问题中得到了使用plugins
的想法。 我的猜测是,这里的作者并不是想用webpack
插件替换less-loader
中的javascriptEnabled
,以实现类似的编写内联 javascript 的方式。 我猜他的意思是出于安全原因,应将内联 javascript 的每一块都重写为less plugin
。
如果你这样想, 文档突然变得更有意义了。
您可以使用不同的Less plugins
替换您的内联 javascript,如您提供的文档所示:
// my-plugin.js
install: function(less, pluginManager, functions) {
functions.add('pi', function() {
return Math.PI;
});
}
// etc
如果您要在样式表中使用它:
@plugin "my-plugin";
.show-me-pi {
value: pi();
}
你会得到:
.show-me-pi {
value: 3.141592653589793;
}
这是@Luze的方法的修改/扩展,文档在这里:
myPluginFile.js
:
const axios = require('axios').default
module.exports = {
install: function (less, pluginManager, functions) {
functions.add("blue", function () {
const headers = {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
timestamp: +new Date(),
}
try {
const method = 'get'
const url = 'https://myAPI.com/myFile.json'
const options = { headers: { ...headers } }
const { data } = await axios[method](url, {}, options)
return data
} catch (error) {
console.info('Error', { msg: error.message })
}
});
},
};
myStyleFile.less
:
@plugin "myPluginFile";
/* Style the body */
body {
color: blue();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.