我需要对我的 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 插件。然而,我对 docs 有点困惑以及如何准确地实现插件以及应该在我的 webpack 配置中实现哪个插件来替换这个现已弃用的选项,以便我仍然可以使用内联 js。我该怎么做呢?谢谢。
最佳答案
出于安全考虑,内联 JavaScript 已被弃用。它很容易受到代码注入(inject)的攻击。因此强烈建议不要使用内联 JavaScript。
如果您真的非常想使用它,您可以使用 javascriptEnabled
被弃用之前的旧版本,但我认为答案太简单了。所以这就是这个。
我做了一些研究,我猜你已经有了使用插件
的想法 question 。我的猜测是,作者这里并不是有意用 webpack
插件替换 less-loader
中的 javascriptEnabled
来实现类似的写法内联 JavaScript。我猜他的意思是出于安全原因,每一段内联 javascript 都应该重写为少插件
。
如果你这样想的话,docs突然变得更有意义了。
您可以使用不同的 Less 插件
替换您的内联 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;
}
关于javascript - 如何用新插件替换 less-loader 中已弃用的 javascriptEnabled 选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58343406/