WebStorm编译报错ReferenceError: $ is not defined，jQuery加载异常求助

嘿，这个问题我熟！你碰到的ReferenceError: $ is not defined完全是脚本执行顺序搞的鬼——你的AlexTypescript.js在jQuery还没加载完成的时候就跑起来了，自然找不到$这个全局变量啦。

咱们来拆解下问题：浏览器是从上到下解析HTML的，你把jQuery的CDN脚本和自定义脚本都放在了<head>里，虽然jQuery的链接是CDN，但网络请求需要时间，你的自定义脚本会先于jQuery加载完成并执行，这时候$还没被定义，错误就出现了。

给你两个靠谱的解决方案：

• 调整脚本位置（最推荐）
  把你的AlexTypescript.js移到</body>标签的前面，这样浏览器会先加载完页面所有元素，确保jQuery已经完全加载后，再执行你的自定义脚本。修改后的HTML应该是这样：

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
      <!-- 这里放你的页面内容 -->
  
      <script type="text/javascript" src="AlexTypescript.js"></script>
  </body>
  </html>
  

• 用加载事件包裹代码（适合必须放头部的场景）
  如果因为某些原因必须把自定义脚本放在<head>里，那就在AlexTypescript.js里把所有jQuery相关的代码包裹起来，确保只有当DOM和jQuery都准备好后才执行：

  // 用原生JS的DOM加载完成事件
  document.addEventListener('DOMContentLoaded', function() {
      $(function() {
          // 你的jQuery业务代码写在这里
      });
  });
  

  或者直接用jQuery自带的就绪事件（前提是jQuery能正常加载）：

  $(document).ready(function() {
      // 你的jQuery业务代码写在这里
  });
  

另外可以顺手检查下jQuery的CDN链接是否能正常访问，但从错误提示来看，大概率还是执行顺序的问题——如果是CDN加载失败，控制台会有404的报错信息，而你现在只是$未定义，所以先调整顺序试试准没错。

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