如何用新插件替换 less-loader 中已弃用的 javascriptEnabled 选项答案

【问题标题】：How to replace the deprecated javascriptEnabled option in less-loader with a new plugin如何用新插件替换 less-loader 中已弃用的 javascriptEnabled 选项
【发布时间】：2020-02-09 02:36:18
【问题描述】：

我需要对我的 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 webpack less less-loader

【解决方案1】：

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

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

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

如果你这么想，docs 突然变得更有意义了。

您可以使用不同的 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;
}

【讨论】：

如果我使用 webpack（如问题中所述）来编译和捆绑我的 less，这个安全漏洞是否不是问题，因为样式表应该只是变成纯 css？
就我对网络安全的了解而言，它确实不应该成为问题。但是，如果他们也弃用了在加载程序上使用内联 javascript 的选项，那么也可能存在安全问题，或者根本没有办法使用最新版本的 LESS 编译 LESS 代码中的内联 javascript。尽管如此，您必须使用早期版本的 less-loader 和 less 才能让您的代码按照现在的方式工作，这在我看来绝不是最好的解决方案。

【解决方案2】：

这是 @Luze 方法的修改/扩展，文档here：

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();
}

【讨论】：