使用Webpack打包Consent-String-SDK-JS库时CSLib未定义问题求助

看起来你已经走对了大部分流程，但问题出在入口模块没有正确导出目标类库的内容，导致Webpack无法将你需要的CSLib全局变量挂载到浏览器环境中。下面是具体的修复步骤：

1. 修正入口文件src/index.js #

你的当前代码只是引入了consent-string库，但没有将它的内容导出。Webpack的library配置是用来把入口模块的导出结果绑定为全局变量的，所以必须明确导出你需要使用的类或整个库：

如果你只想使用库的核心ConsentString类（这是处理 consent 字符串的主要类），修改index.js为：

// 导出ConsentString类作为模块输出
module.exports = require('consent-string').ConsentString;

如果你需要同时使用库中的其他类（比如VendorConsent），可以导出整个库的所有内容：

// 导出整个库的所有导出项
module.exports = require('consent-string');

2. 修复Webpack配置文件的语法错误 #

你的webpack.config.js最后有一个多余的}被错误地放在了标题标签里，确保配置文件是完整有效的JavaScript：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    library: 'CSLib',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'dist')
  }
};

3. 调整前端代码以匹配导出方式 #

• 如果你只导出了ConsentString类，index.html里的代码可以直接实例化CSLib：

<script src="bundle.js"></script>
<script type="text/javascript">
  // 注意：ConsentString实例化需要传入有效的consent字符串参数
  var consentData = new CSLib('your-valid-consent-string');
  console.log('euconsent : ', consentData);
</script>

• 如果你导出了整个库，需要通过CSLib访问对应的类：

<script src="bundle.js"></script>
<script type="text/javascript">
  var consentData = new CSLib.ConsentString('your-valid-consent-string');
  console.log('euconsent : ', consentData);
</script>

为什么之前会报错？ #

Webpack的library选项的作用是：将入口模块的导出值赋值给你指定的全局变量名称（这里是CSLib）。当你的入口模块只是require了库但没有导出任何内容时，模块的导出值是undefined，所以浏览器中CSLib自然就是未定义状态。

内容的提问来源于stack exchange，提问作者Yannick Yassine Adissa