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插件。但是，我对docs以及如何正确实现一个插件以及应该在我的webpack配置中实现哪个插件来替换此现已弃用的选项感到有些困惑，因此我仍然可以使用内联js。我该怎么做呢？谢谢。

Answer 1

出于安全考虑，不推荐使用内联javascript。它容易受到代码注入的攻击。因此，强烈建议不要使用内联javascript。

如果您真的想严重使用它，可以使用不推荐使用javascriptEnabled之前的旧版本，但是我想答案太简单了。这是这里。

我做了一些研究，我想您从这个question开始使用plugins了。我的猜测是，这里的作者并不是要使用javascriptEnabled插件替换less-loader中的webpack来实现类似的内联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;
}

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

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

2 个答案: