{"id":23243333,"url":"https://github.com/lucivuc/browser-cjs","last_synced_at":"2025-08-20T03:32:22.038Z","repository":{"id":74245496,"uuid":"193384488","full_name":"luciVuc/browser-cjs","owner":"luciVuc","description":"A minimal CommonJS-like module loader for the browser environment.","archived":false,"fork":false,"pushed_at":"2019-08-08T07:38:19.000Z","size":28,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-12-12T06:55:53.820Z","etag":null,"topics":["browser-cjs","commonjs","in-browser","loader","module","module-loader","requirejs"],"latest_commit_sha":null,"homepage":"https://lucivuc.github.io/browser-cjs","language":"JavaScript","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/luciVuc.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":"2019-06-23T18:53:43.000Z","updated_at":"2024-05-31T17:51:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"7b84f43b-9c07-4b54-8add-033a122d2640","html_url":"https://github.com/luciVuc/browser-cjs","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"d4bf696ed263162765375bd2485f9281d4858e3f"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luciVuc%2Fbrowser-cjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luciVuc%2Fbrowser-cjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luciVuc%2Fbrowser-cjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luciVuc%2Fbrowser-cjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luciVuc","download_url":"https://codeload.github.com/luciVuc/browser-cjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230388131,"owners_count":18217759,"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":["browser-cjs","commonjs","in-browser","loader","module","module-loader","requirejs"],"created_at":"2024-12-19T06:16:26.654Z","updated_at":"2024-12-19T06:16:27.215Z","avatar_url":"https://github.com/luciVuc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [browser-cjs](#browser-cjs)\n\n\u003e A minimal [*CommonJS*](http://eng.wealthfront.com/2015/06/16/an-introduction-to-commonjs/)-like module loader for the browser environment.\n\nAs a client-side [*CommonJS*](http://eng.wealthfront.com/2015/06/16/an-introduction-to-commonjs/) module loader, **[browser-cjs](#browser-cjs)** aims to implement a [Node.js](https://nodejs.org/)-like module loading utility in the browser environment. In other words, it defines in the global scope of the browser a utility function called `require`, whose role is to **synchronously** load (without the need of a JS bundler, such as [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/)) JS modules defined with to the [*CommonJS*](http://eng.wealthfront.com/2015/06/16/an-introduction-to-commonjs/) module syntax.\n\n**Note:**\nIn a case when the runtime environment already supports the `require` utility function (such as the [ElectronJS](https://electronjs.org) environment, or the [NWJS](https://nwjs.io/) environment), **[browser-cjs](#browser-cjs)** will not override or replace the existing `require` function; instead, it will reuse it as-is.\n\n## Installation\n\nTo give **[browser-cjs](#browser-cjs)** a try install it with `npm`, using\n\n```sh\nnpm install browser-cjs\n```\n\nor\n\n```sh\nnpm install --save browser-cjs\n```\n\nand load it in your page from its installation package using an HTML `script` tag, as shown in the following example:\n\n```html\n\u003cscript src=\"/node_modules/browser-cjs/require.js\"\u003e\u003c/script\u003e\n```\n\nAs an alternative, you may download a copy locally or reference it directly from [**unpkg**](`https://unpkg.com/browser-cjs/require.js`):\n\n```html\n// For production\n\u003cscript src=\"https://unpkg.com/browser-cjs/require.min.js\"\u003e\u003c/script\u003e\n\n// For development\n\u003cscript src=\"https://unpkg.com/browser-cjs/require.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nOnce the **[browser-cjs](#browser-cjs)** module loader is fully loaded, and its `require` utility function available in the browser's global scope, it is ready for loading content, which includes [CommonJS](http://eng.wealthfront.com/2015/06/16/an-introduction-to-commonjs/) modules and `JSON` data files.\n\n### Loading [CommonJS](http://eng.wealthfront.com/2015/06/16/an-introduction-to-commonjs/) modules\n\n[CommonJS](http://eng.wealthfront.com/2015/06/16/an-introduction-to-commonjs/) modules, or Javascript files in [CommonJS](http://eng.wealthfront.com/2015/06/16/an-introduction-to-commonjs/) module format, are files that expose JS functionality typically using the `module.exports` syntax. Here is an example of such a module:\n\n```js\nmodule.exports = 'This is a string';\n```\n\nTo use **[browser-cjs](#browser-cjs)** for loading and evaluating JS files in [CommonJS](http://eng.wealthfront.com/2015/06/16/an-introduction-to-commonjs/) module format, simply call the globally available function `require` with the name of the module file given as argument (as it's done in [`Node.js`](https://nodejs.org/)).\n\nFor instance, to load a module called `moduleName.js`:\n\n```html\n\u003cscript\u003e\n  const moduleName = require(\"/path/to/moduleName.js\");\n  // ...\n  // The rest of the code goes here...\n\u003c/script\u003e\n```\n\n**Important:**\n\n**It is necessary to specify the extension of the file (`.es6`, `.js`, etc.), because without the extension, **[browser-cjs](#browser-cjs)** will assume that `moduleName` is a directory and it will try to load the `/path/to/nodeModule/\u003cpackage.main\u003e` file, where `\u003cpackage.main\u003e` is the file `main` specified in the `package.json` (e.g.: `main: \"./index.js\"`).** (Please refer to the [Limitations](#limitations) section).\n\n### `JSON` data files\n\nIn addition to [*CommonJS*](http://eng.wealthfront.com/2015/06/16/an-introduction-to-commonjs/) modules, **[browser-cjs](#browser-cjs)** supports loading plain `JSON` files as well. However, it is important to keep in mind that **[browser-cjs](#browser-cjs)** loads content synchronously, and in most cases a synchronous operation is not the desired or recommended way of loading this type of files (unless there is a specific reason for that, such as loading configuration files, or other special cases in which a synchronous operation is acceptable, or even preferred over an asynchronous operation).\n\nThus, to let **[browser-cjs](#browser-cjs)** know that the content it has to load is not a module, but a `JSON` data file, the file name must end with the `.json` extension. Here are some examples of loading JSON files with **[browser-cjs](#browser-cjs)**'s `require` utility:\n\n```js\nconst config = require(\"/path/to/file/config.json\");\nconst package = require(\"/package.json\");\n```\n\n## Options\n\nTo allow the user to modify its default configuration, **[browser-cjs](#browser-cjs)** supports a set of options (or parameters), which includes:\n\n* `scripts` - a comma separated list of prerequisite non-CommonJS Javascript files,\n* `styles` - a comma separated list of stylesheets,\n* `base_dir` - the base URL (URI) to automatically prepend to all relative links. The default option is `base_dir=\"/\"`, and\n* `main` - the module with entry point role (the module to load and run first). The default value of `main` is `null`, in which case no module will be automatically loaded and executed.\n\nThese options can be passed as data attributes (using the `data-` prefix) to the `script` tag that loads the library as in the following example:\n\n```html\n\u003cscript\n  src=\"/node_modules/browser-cjs/require.js\"\n  data-base_dir=\"./dist\"\n  data-styles=\"./css/style.css\"\n  data-scripts=\"https://unpkg.com/react@16/umd/react.production.min.js, https://unpkg.com/react-dom@16/umd/react-dom.production.min.js, https://unpkg.com/prop-types@15.6/prop-types.min.js\"\n  data-main=\"./dist/index.js\"\u003e\n\u003c/script\u003e\n```\n\nIn the example above the `script` tag, in addition to loading the `require.js` file, specifies the base URL for all relative links, specifies also a stylesheet and some pre-requisite (probably non-CommonJS compatible) scripts to load, and indicates the file to load and execute first as the main entry point of the application.\n\n### Example\n\nNext is a sample app that uses **[browser-cjs](#browser-cjs)**' `require` function to load the `package.json` file of this package and display the package `name`, `description` and `version` of the package, as well as the `version` of the preloaded `jquery` library.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eBrowser-CJS Example\u003c/title\u003e\n\n    \u003c!-- load the \u003cb\u003ebrowser-cjs\u003c/b\u003e library --\u003e\n    \u003cscript src=\"../../../../require.js\" data-scripts=\"https://unpkg.com/jquery@3.3.1/dist/jquery.js\"\u003e\n    \u003c/script\u003e\n\n    \u003c!-- the main script --\u003e\n    \u003cscript\u003e\n      window.addEventListener(\"load\", () =\u003e {\n        const package = require(\"./package.json\");\n        $(\"#root\").html(`\u003cdiv\u003e\n          \u003ch2\u003e${package.name}\u003c/h2\u003e\n          \u003cp\u003e${package.description}\u003c/p\u003e\n          \u003cdiv\u003eVersion: \u003cspan\u003e${package.version}\u003c/span\u003e\u003c/div\u003e\n          \u003chr /\u003e\n          \u003cdiv\u003ejQuery version: \u003cspan\u003e${$.fn.jquery}\u003c/span\u003e\u003c/div\u003e\n        \u003c/div\u003e`);\n      });\n    \u003c/script\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Limitations\n\nSince this library is not designed for the [`Node.js`](https://nodejs.org/) environment, but rather for the browser environment, it will behave slightly different than the module loader of [`Node.js`](https://nodejs.org/), and the main reason is that the browser's limitations and constrains still apply.\n\nOne major difference is that the `require()` function of **[browser-cjs](#browser-cjs)**, unlike the `require()` function of [`Node.js`](https://nodejs.org/), resolves the path to a given module relative to the current directory, the root directory or the `data-base_dir` script attribute, if provided.\n\nFor this reason, modules located inside `npm` packages must be requested by their full path relative to the `node_modules` directory, as in the following examples:\n\n```js\nconst atob = require(\"/node_modules/atob\");\nconst use = require(\"/node_modules/use\");\nconst wrappy = require(\"/node_modules/wrappy\");\n```\n\nacknowledging that due to the client-side limitations and constrains there is no guarantee that all [`Node.js`](https://nodejs.org/) modules will be able to run, or run correctly, in the browser environment.\n\n## Version\n\n1.0.3\n\n## Demo Apps\n\nHere is a list of sample demo apps that use **[browser-cjs](#browser-cjs)** as a module loader:\n\n* [EventListDemo](./demo/EventListApp/readme.md#eventlistdemo) App - A simple ReactJS app, that displays a list of upcoming events, uses browser-cjs as a module loader for the custom ReactJS Components it is built with.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucivuc%2Fbrowser-cjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucivuc%2Fbrowser-cjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucivuc%2Fbrowser-cjs/lists"}