如何在React/Webpack应用中导入使用npm包的无导出自执行函数

以下是三种常用的可行方案，可根据你的项目需求选择：

方案1：直接全局引入后从window取值（最简单，适合大多数场景） #

• 第一步正常安装依赖：npm install vanilla-cookieconsent --save
• 在项目入口文件（比如src/index.js）或者需要使用该工具的组件顶部，直接全量引入包，不需要接收导出值：

  // 引入后自动执行自执行函数，挂载全局变量
  import 'vanilla-cookieconsent'
  // 同步引入配套样式
  import 'vanilla-cookieconsent/dist/cookieconsent.css'
  

• 后续使用时直接从window对象上取挂载的方法即可：window.CookieConsent.init(/* 配置参数 */)
• 如果是TypeScript项目，可在全局类型声明文件中添加declare interface Window { CookieConsent: any }规避类型报错

方案2：配置Webpack externals + 静态资源引入（适合不想把包打进业务bundle的场景） #

• 把vanilla-cookieconsent的dist目录下的js、css文件拷贝到项目的public静态资源目录
• 在项目的HTML模板文件中，用script标签和link标签分别引入对应的静态js、css资源
• 修改webpack配置文件，添加externals配置：

  module.exports = {
    // 其余原有配置不变
    externals: {
      'vanilla-cookieconsent': 'CookieConsent'
    }
  }
  

• 配置完成后，你在业务代码中可以正常写import CookieConsent from 'vanilla-cookieconsent'，webpack会自动将引入映射到全局的window.CookieConsent变量，不需要手动从window取值

方案3：使用script-loader控制执行（适合需要自定义执行时机的场景） #

• 先安装loader依赖：npm install script-loader --save-dev
• 引入时指定loader，会自动执行脚本并返回挂载的全局变量：

  import CookieConsent from 'script-loader!vanilla-cookieconsent'
  

• 拿到的CookieConsent就是全局挂载的方法，可直接调用

注意事项 #

• 所有方案都需要确保调用方法的时机在包加载执行完成之后，如果是异步引入的包，要等待加载完成后再调用，避免出现变量undefined的问题

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