非Node.js环境下如何在JS文件中引入外部JS（无需HTML script标签）

你需要在非Node.js环境中，直接在info.js里引入外部JS文件（比如axios的CDN），且不在HTML中添加对应的<script>标签，之前尝试的动态创建script标签代码未生效，可按以下方式解决：

问题分析 #

你原代码的核心问题有两个：

1. 脚本加载是异步的，若直接在include后调用axios，会因脚本未加载完成导致axios is not defined错误
2. document.getElementsByTagName('script').item(0)可能在脚本执行时不存在（比如info.js是页面第一个加载的脚本），调用before()会抛出空指针异常

解决方案一：带回调的动态加载（兼容所有浏览器） #

修改动态加载函数，添加加载完成回调，确保依赖代码在脚本加载成功后执行：

function include(file, callback) {
  const script = document.createElement('script');
  script.src = file;

  // 脚本加载成功触发
  script.onload = () => callback && callback(null);
  // 脚本加载失败触发
  script.onerror = (err) => callback && callback(err);

  // 插入到head标签中，避免找不到目标节点的问题
  document.head.appendChild(script);
}

// 使用示例：在回调中安全使用axios
include('https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js', function(err) {
  if (err) {
    console.error('axios加载失败:', err);
    return;
  }

  // 这里可以正常调用axios
  axios.get('https://example.com/api')
    .then(res => console.log('请求结果:', res.data))
    .catch(err => console.error('请求出错:', err));
});

解决方案二：ES6动态import（现代浏览器/支持ES模块的环境） #

如果你的运行环境支持ES模块，可直接使用动态import语法，写法更简洁：

// info.js中直接使用
import('https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js')
  .then(module => {
    const axios = module.default;
    // 调用axios接口
    axios.get('https://example.com/api')
      .then(res => console.log('请求结果:', res.data));
  })
  .catch(err => console.error('axios加载失败:', err));

注意：使用该方式需要确保HTML中引入info.js时添加type="module"属性：

<script src="info.js" type="module"></script>

内容的提问来源于stack exchange，提问作者Md Alamgir Hossain