RequireJS - jQuery 使用 Shim 配置

jQuery 使用 Shim 配置来定义 jQuery 插件的依赖项，并通过声明依赖项来设置模块值。

加载 jQuery

require(['jquery','jquery.myjsfile1','jquery.myjsfile2'], function($) {
   $(function() {
      //code here
   });
});

示例

以下示例使用 shim 配置来定义 jQuery 插件的依赖项。创建一个名为 index.html 的 html 文件，并将以下代码放入其中 −

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery Shim Config</title>
      <script data-main = "app" src = "lib/require.js"></script>
   </head>
   
   <body>
      <h2>jQuery Shim Config</h2>
      <p>Welcome to Tutorialspoint!!!</p>
   </body>
</html>

创建一个名为app.js的js文件，并在其中添加以下代码 −

//可以配置从lib目录加载模块
requirejs.config ({
   "baseUrl": "lib",
   
   "paths": {
      "app": "../app"
   },
   
   "shim": {
      "jquery.shim1": ["jquery"],
      "jquery.shim2": ["jquery"]
   }
});

//要启动应用程序，请从 app 文件夹加载主模块
requirejs(["app/main"]);

创建一个名为 app 的文件夹，并从此文件夹加载 main.js 模块 −

define(["jquery", "jquery.shim1", "jquery.shim2"], function($) {
   //加载 jquery.shim1.js 和 jquery.shim2.js 插件
   $(function() {
      $('body').shim1().shim2();
   });
});

再创建一个名为 lib 的文件夹来存储 require.js 文件和其他 js 文件，如下所示−

lib/jquery.shim1.js

$.fn.shim1 = function() {
   return this.append('<p>This is shim1 config...!</p>');
};

lib/jquery.shim2.js

$.fn.shim2 = function() {
   return this.append('<p>This is shim2 config...!</p>');
};

输出

在浏览器中打开 HTML 文件;您将收到以下输出 −

requirejs_jquery.html