如何在Gulp打包的非ES6模块独立JS脚本中使用js-cookie？

无需搭建Webpack环境，仅需修改3处现有配置即可实现需求：

• 第一步：修改gulpfile.js中的js文件路径配置，将js-cookie的预构建UMD文件加入拼接队列，注意要放在自定义脚本的前面，保证依赖先加载：

const files = {
  // 其余scss相关配置保持不变
  jsSrcPath: [
    'node_modules/slick-carousel/slick/slick.js',
    'node_modules/js-cookie/dist/js.cookie.min.js', // 新增js-cookie依赖路径
    'js/*.js' // 自定义脚本放在依赖后，保证调用时全局变量已挂载
  ],
  // 其余输出路径配置保持不变
}

• 第二步：修改feature.js代码，移除无效的import/require语句，直接使用全局挂载的Cookies对象即可，注意修正原代码中cookies小写的拼写错误，要和全局变量名保持一致大写开头：

// 无需任何引入语句，js-cookie加载后会自动挂载为window.Cookies全局对象
const rs = Cookies.get('referral_source');
if (typeof rs !== 'undefined') {
  console.log('referral_source = ' + rs);
}

• 第三步：重新运行gulp构建命令即可生效。

原理是你当前的Gulp流程是直接拼接所有JS文件后压缩，js-cookie提供的UMD版本会自动识别运行环境，在普通浏览器环境下直接挂载为全局变量，完全适配你当前的构建逻辑，不需要额外引入模块化打包工具。

内容的提问来源于stack exchange，提问作者Derrick Miller