{"id":18768550,"url":"https://github.com/dacili/requirejs","last_synced_at":"2025-12-10T05:30:17.647Z","repository":{"id":250331576,"uuid":"834161008","full_name":"Dacili/RequireJS","owner":"Dacili","description":"JS module loader","archived":false,"fork":false,"pushed_at":"2024-07-29T16:37:10.000Z","size":85,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-29T07:16:50.976Z","etag":null,"topics":["amd","async","html","javascript","module-loader","modules","requirejs","script"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dacili.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-26T14:49:58.000Z","updated_at":"2024-07-29T16:37:13.000Z","dependencies_parsed_at":"2024-07-29T13:11:24.892Z","dependency_job_id":null,"html_url":"https://github.com/Dacili/RequireJS","commit_stats":null,"previous_names":["dacili/requirejs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FRequireJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FRequireJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FRequireJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FRequireJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dacili","download_url":"https://codeload.github.com/Dacili/RequireJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239671416,"owners_count":19677873,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amd","async","html","javascript","module-loader","modules","requirejs","script"],"created_at":"2024-11-07T19:13:07.779Z","updated_at":"2025-12-10T05:30:17.590Z","avatar_url":"https://github.com/Dacili.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# RequireJS\nhttps://requirejs.org/docs/api.html  \n\n## What is a module in JS? \nSplitting JavaScript programs up into separate modules that can be imported when needed.   \n(rather than keeping it in a single file and moving those pieces to other files or projects.)   \nModules can contain functions, variables, and objects that perform specific functions.  \n\n## Modular JS libraries and frameworks: \n#### 1. CommonJS \nis a project to standardize the module ecosystem for JavaScript outside of web browsers.  \nCommonJS's specification of how modules should work is widely used today for server-side JavaScript with **Node.js**.\n#### 2. AMD (Asynchronous module definition) \nAMD based module systems such as RequireJS.  \nAMD is a JavaScript specification that defines an interface for writing and loading modules, such that the module and its dependencies can be asynchronously loaded.\n#### 3. UMD  (Universal Module Definition)\none more module system, suggested as a universal one, is compatible with AMD and CommonJS.\n#### Newer: \n#### 4. Webpack \nis used to bundle modules and optimize the code.  \nWhen using webpack to bundle your app, you can pick from a variety of module syntax styles including ES6, CommonJS, and AMD.\n\n#### 5. Babel\n- is a JavaScript compiler  \n- is used to transpile the JavaScript code, making it compatible with older browsers.  \nTranspile = process of converting source code from one high-level programming language to another\n\n## Ways to execute JS script\nThere are several ways an external script can be executed:  \n- **async**: The script is downloaded *in parallel* to parsing the page and *executed* as soon as it is available (**before parsing completes**)  \n```\n\u003cscript src=\"medi.js\" async\u003e\u003c/script\u003e\n```  \n- **defer**: The script is downloaded *in parallel* to parsing the page, and executed **after parsing (of page) completes**   \n```\n\u003cscript src=\"medi.js\" defer\u003e\u003c/script\u003e\n```  \n- **neither async or defer** is present (it's synchronous): The script is downloaded and executed immediately, **blocking parsing until the script is completed**    \n```\n\u003cscript src=\"medi.js\"\u003e\u003c/script\u003e\n```\n\n## What is RequireJS?\nRequireJS is a JavaScript *file and module loader*.  \nIn JavaScript, *module loaders* are tools or mechanisms that allow you to load and manage *modules*.  \n*Modules* are reusable pieces of code.  \nRequireJS always **loads modules asynchronously**, with no blocking.\n\n## Why to use it?\nThere are some reasons:  \n • In a large app, a lot of JavaScript files are needed, and *each script tag needs a request*.  \n ```\n \u003cscript src='https://unpkg.com/@cometchat/chat-sdk-javascript@4.0.7/CometChat.js' type=\"text/javascript\"\u003e\u003c/script\u003e\n```  \n • You have to put them in a same order in which they are called, i.e. *File which is dependent on other should be loaded after the dependent ones*.  \n```\n\u003cscript src=\"demo.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"dependsOnDemo.js\"\u003e\u003c/script\u003e\n``` \n## How to use it?\n#### 1. Download the file  \n(https://requirejs.org/docs/download.html#requirejs) and name it *require.js*  \n#### 2. Use script tag in HTML for require.js file\n ```\n \u003cscript src=\"scripts/require.js\"\u003e\u003c/script\u003e\n```\n#### 3. **Config** file  \na) Use **default** config:    \nIf you don't create any config, it will use defaults, from require.js file:  \n![image](https://github.com/user-attachments/assets/9b0a0943-019c-45d4-9ad3-930ee3785e10)  \nNotice that baseUrl is searching path ./  \n**Which means load any module from current folder.**  \nRelative paths symbols:  \n./ (current folder)  \n../ (parent)\n\nb) **Create config file**:  \nIf you want to create a config file, you could add something like this code to new js file (create something like require-js-config.js).  \nCheck *Configuration settings* section for more details regarding the config.  \n```\n   requirejs.config({\n    //By default load any module IDs from js/lib\n    baseUrl: 'js/lib',\n    //except, if the module ID starts with \"app\", load it from the js/app directory. paths config is relative to the baseUrl,\n    // and never includes a \".js\" extension since the paths config could be for a directory.\n    paths: {\n        app: '../app'\n    }\n   });  \n```\n\n#### 4. use **requirejs()** function\n##### a) you need 1 module to be loaded for some function\n```\nrequirejs([\"medina\"], function(exampleParam) {\n   // you code stuff is here\n   // exampleParam.callFunction();\n});\n```\n- once medina.js file is loaded, the function will be executed\n- *The parameter exampleParam in function can be named whatever you like, and it's an object from the module you loaded. So you could now use functions from that module.*\n\n##### b) you need several modules to be loaded\n```\nrequirejs(['jquery', 'canvas'],\nfunction   ($, canvas) {\n    //jQuery and canvas modules are all\n    //loaded and can be used here now.\n});\n```\nif we require *more modules*, then in the function we will have *as many params*, where the **order will be matched** as in requirejs function  \n![image](https://github.com/user-attachments/assets/54266a22-1315-41bc-ae16-b358c2a37ba5)  \n\nIf you created a config file, you could call it same way      \n```\n\u003cscript src=\"scripts/require.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nrequire(['scripts/require-js-config'], function() {\n    // Configuration loaded now, safe to do other require calls that depend on that config.\n    require(['foo'], function(foo) {\n    });\n});\n\u003c/script\u003e\n```\nThe code above technically means:\n- Load require.js  \n- After that, when require-js-config is loaded, execute the code from the function,\n- After that once foo is loaded, proceed with its function.  \n#### 5. or you could define your own module with define()\n##### a) Define named module without dependencies\n ```\ndefine(\"medii\",\n        function(cart, inventory) {\n            //Define foo/title object in here.\n       }\n    );\n```\n##### b) Define named module with dependencies\ndefine() function allows the module to declare its dependencies before being loaded:   \n ```\n define(\"medii\",\n        [\"my/cart\", \"my/inventory\"],\n        function(cart, inventory) {\n            //Define foo/title object in here.\n       }\n    );\n```\nThe code above defines new module medii, once the dependencies in the array are loaded.   \nAnd then call that module wherever you need it like:  \n\n```\nrequire([\"medii\"], function(myModule) {\n});\n```\n## requirejs() vs require()\nSometimes we will see one or other use in practice. But technically, **they're the same**.  \nThey implemented require(), to make it easier to cooperate with other AMD loaders on globally agreed names.  \n(https://stackoverflow.com/questions/13605600/requirejs-difference-between-requirejs-and-require-functions)\n## Configuration settings: \n### baseUrl\nbaseUrl: the root path to use for all module lookups  \nLoad any module from the folder that matches url.  \n\n### data-main attribute\n```\n\u003cscript data-main=\"scripts/main\" src=\"scripts/require.js\"\u003e\u003c/script\u003e\n```\nIf no baseUrl is explicitly set in the configuration, the default value will be the location of the HTML page that loads require.js.   \nIf a data-main attribute is used, that path will become the baseUrl (in example, it would be main.js path).  \nIf you *want to do require()* calls *in the HTML* page, then it is best to *not use data-main*.  \n![image](https://github.com/user-attachments/assets/6eec26e2-139e-44e8-a314-81af6600cbe8)  \n\ndata-main is only intended for use when the page just has *one main entry point*, the data-main script. \n\n### paths\npaths: path mappings for module names *not found directly under baseUrl*  \nThe path that is used for a module name should not include an extension (e.g. .js), since the path mapping could be for a directory.  \nThe path mapping code will automatically add the .js extension when mapping the module name to a path. \n\n### waitSeconds\nwaitSeconds: The number of seconds to wait before giving up on loading a script.  \nSetting it to 0 disables the timeout. The default is 7 seconds.\n\n## Why in some places there is a data-main attribute in the script tag?\n(https://stackoverflow.com/questions/35027046/difference-between-data-main-and-normal-script-loading)  \nScript tag with data-main attribute:\n```\n\u003cscript data-main=\"scripts/main\" src=\"scripts/require.js\"\u003e\u003c/script\u003e\n```\nor without data-main attribute\n```\n\u003cscript src=\"scripts/require.js\"\u003e\u003c/script\u003e\n```\nThe first one is equivalent to this:\n```\n\u003cscript src=\"scripts/require.js\"\u003e\u003c/script\u003e\n\u003cscript\u003erequire([\"scripts/main\"])\u003c/script\u003e\n```\nAlso, the difference is mentioned in *configuration settings* part, for data-main attr.\n## Define vs require\n- **define**: used to define modules, to use in multiple locations (reuse)\n- **require**: load and use existing modules (I want this module + also load all its dependencies)\n\nhttps://stackoverflow.com/questions/9507606/when-should-i-use-require-and-when-to-use-define  \nhttps://stackoverflow.com/questions/17366073/requirejs-define-vs-require\n\n## Errors \nThe error that made me learn more about require js is:  \nMISMATCHED ANONYMOUS DEFINE() MODULES (https://requirejs.org/docs/errors.html#mismatch)    \nThe external library has in their SDK js file, *define* without the name of the module, so that blows require js.  \n```\ndefine([],t)\n```\nhttps://stackoverflow.com/questions/63793934/how-to-solve-mismatched-anonymous-define-module\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdacili%2Frequirejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdacili%2Frequirejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdacili%2Frequirejs/lists"}