在浏览器snippet中导入CryptoJS等外部模块运行代码失败如何解决

失效原因说明 #

浏览器Snippet（DevTools代码片段）运行在原生浏览器环境，不支持Node.js的require语法，同时无默认模块解析规则，直接使用裸import语句无法定位到模块资源，因此你之前的两种方案都会报错。

方案1：动态插入Script标签加载UMD格式模块 #

UMD格式的模块加载完成后会将API挂载到全局window对象，直接调用即可，适合绝大多数第三方工具库：

// 封装脚本加载工具，加载完成后触发回调
function loadScript(url, onLoad) {
  const script = document.createElement('script')
  script.src = url
  script.onload = onLoad
  script.onerror = () => console.error('模块加载失败')
  document.head.appendChild(script)
}

// 加载CryptoJS后执行业务逻辑
loadScript('替换为你选用的CryptoJS UMD版本资源地址', () => {
  function encrypt(message = '', key = ''){
    const encryptedData = CryptoJS.AES.encrypt(message, key)
    return encryptedData.toString()
  }
  // 此处可调用encrypt方法执行加密
  console.log(encrypt('测试文本', '测试密钥'))
})

方案2：直接拷贝模块UMD代码到Snippet头部 #

如果需要离线使用，可以将第三方库的UMD格式全量代码直接复制粘贴到你写的业务代码最上方，不需要额外加载逻辑，直接调用全局暴露的变量即可，适合体积较小的工具库。

方案3：使用动态import加载ES模块 #

新版本Chrome支持在Snippet中使用带完整路径的动态import语句加载ES格式模块：

// 传入ES模块的完整资源路径，加载完成后获取导出对象
import('替换为你选用的CryptoJS ES版本资源地址')
  .then((module) => {
    const CryptoJS = module.default
    function encrypt(message = '', key = ''){
      const encryptedData = CryptoJS.AES.encrypt(message, key)
      return encryptedData.toString()
    }
    // 调用加密方法
    console.log(encrypt('测试文本', '测试密钥'))
  })

注意事项 #

• 方案1、3需要网络可正常访问对应的资源地址
• 如果你需要在特定域名下使用Snippet，注意排查对应域名的内容安全策略（CSP）是否限制了外部资源加载

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