如何在webpack或rollup项目中导入全局变量

Question

我想使用 Rollup 或 webpack 为 CMS 创建一个模块。 我有一个脚本标签，其中包含一些我需要在 webpack 模块中使用的变量，但我无法直接包含它们，因为这些变量在服务器端呈现。

我尝试使用汇总配置中的全局部分，但我不确定这是否是正确的方法。

带有变量的标签脚本：

<script>
  var dle_root       = '/';
  var dle_admin      = '';
  var dle_login_hash = '{HASH}';
  var dle_group      = 5;
  var dle_skin       = 'testskin';
  var dle_wysiwyg    = '2';
  var quick_wysiwyg  = '2';
  var dle_min_search = '3';
</script>

如何在Rollup或webpack中定义外部变量？ 怎样做才是正确的？

Answer 1

您可以使用模块导出外部来实现您在

webpack.config.js

设置单独的对象外部中寻找的内容，如下所示：

const webpack = require('webpack');

module.exports = {
  // add your rest of th other configurations here
  plugins: [
    new webpack.DefinePlugin({
      dle_root: JSON.stringify('/'),
      dle_admin: JSON.stringify(''),
      dle_login_hash: JSON.stringify('{HASH}'),
      dle_group: JSON.stringify(5),
      dle_skin: JSON.stringify('testskin'),
      dle_wysiwyg: JSON.stringify('2'),
      quick_wysiwyg: JSON.stringify('2'),
      dle_min_search: JSON.stringify('3')
    })
  ]
};

按如下方式访问它们：

console.log(dle_root); // Outputs:'/'
console.log(dle_admin); // Outputs:''
console.log(dle_login_hash); // Outputs:'{HASH}'
console.log(dle_group); // Outputs:5
console.log(dle_skin); // Outputs:testskin