JQuery-UI独立JS脚本按需引入的正确顺序与报错解决

报错根因 #

• 通过bower安装的jQuery UI 1.12.1版本中，jquery-ui/ui/路径下的所有拆分源码文件均为AMD模块格式，文件内部会判断并调用全局define方法完成模块注册。由于项目未引入任何AMD加载器（如RequireJS），全局不存在define方法，因此直接用普通<script>标签引入时，就会触发Uncaught ReferenceError: define is not defined错误。
• 此前编写的引入配置存在几处客观问题：
  • 存在指向文件夹的无效script路径：<script src="/bower/jquery-ui/ui/effects/"></script>
  • 重复引入accordion.js、resizable.js等冗余文件
  • 遗漏了完整库头注释中标注的jquery-1-7.js兼容适配文件
• 参考的官方Bower使用说明中提到的按需引入思路，本质是基于模块加载器的依赖管理逻辑，并非脱离加载器直接用script标签拉取AMD格式源码文件。

适配现有项目的最小引入方案 #

项目当前通过普通<script>标签加载静态资源，未使用AMD加载器，因此不需要直接拉取ui/目录下的AMD格式源码，按依赖顺序引入无模块封装的适配版本文件即可。仅实现dialog、tabs组件功能的最小依赖集为：

1. 前置加载jQuery核心：/bower/jquery/dist/jquery.js
2. 加载通用基础依赖（所有UI组件通用的公共模块）：

   <script src="/bower/jquery-ui/ui/jquery-1-7.js"></script>
   <script src="/bower/jquery-ui/ui/keycode.js"></script>
   <script src="/bower/jquery-ui/ui/unique-id.js"></script>
   <script src="/bower/jquery-ui/ui/data.js"></script>
   <script src="/bower/jquery-ui/ui/disable-selection.js"></script>
   <script src="/bower/jquery-ui/ui/focusable.js"></script>
   <script src="/bower/jquery-ui/ui/tabbable.js"></script>
   <script src="/bower/jquery-ui/ui/scroll-parent.js"></script>
   <script src="/bower/jquery-ui/ui/widget.js"></script>
   <script src="/bower/jquery-ui/ui/position.js"></script>
   

3. 加载dialog组件专属依赖：

   <script src="/bower/jquery-ui/ui/widgets/mouse.js"></script>
   <script src="/bower/jquery-ui/ui/widgets/draggable.js"></script>
   <script src="/bower/jquery-ui/ui/widgets/resizable.js"></script>
   <script src="/bower/jquery-ui/ui/widgets/button.js"></script>
   <script src="/bower/jquery-ui/ui/widgets/dialog.js"></script>
   

4. 加载tabs组件专属依赖：

   <script src="/bower/jquery-ui/ui/labels.js"></script>
   <script src="/bower/jquery-ui/ui/form-reset-mixin.js"></script>
   <script src="/bower/jquery-ui/ui/widgets/tabs.js"></script>
   

提示：如果需要使用dialog、tabs的默认淡入动画效果，仅需额外引入/bower/jquery-ui/ui/effect.js和/bower/jquery-ui/ui/effects/effect-fade.js两个文件即可，不需要引入全部17个特效模块。

其他可选实现路径 #

• 若项目已经集成AMD加载器，可直接使用ui/目录下的AMD格式源码，由加载器自动完成define方法的注入，不需要额外处理文件格式问题。
• 如果不想手动梳理依赖顺序，可使用jQuery UI官方的自定义打包工具，选择需要的dialog、tabs组件，工具会自动生成已经去除模块封装、按依赖顺序拼接完成的单文件JS，直接引入即可适配普通script标签场景，不会触发define未定义的报错。

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