如何用新插件替换更少加载器中已弃用的 javascriptEnabled 选项

Question

我需要对我的较少文件使用内联 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。我该怎么做呢？谢谢。

Answer 1

出于安全考虑，内联 JavaScript 已被弃用。它容易受到代码注入的影响。因此，强烈建议不要使用内联JavaScript。

如果您真的想使用它，您可以使用javascriptEnabled弃用之前的旧版本，但我想这个答案太简单了。所以是这个。

我做了一些研究，我想你从这个问题中得到了使用plugins的想法。我的猜测是，这里的作者并不是要用webpack插件替换less-loader中的javascriptEnabled来实现类似的内联JavaScript编写方式。我猜他的意思是，出于安全原因，每一段内联javascript都应该重写为less plugin。

如果你这样想，文档突然变得更有意义了。

您可以将内联 javascript 替换为不同的Less plugins如您提供的文档所示：

// 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;
}

Answer 2

以下是@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();
}