https://github.com/kelpycode/module.js
A lightweight clientside external module system for the browser
https://github.com/kelpycode/module.js
javascript javascript-library module require requirejs
Last synced: 5 months ago
JSON representation
A lightweight clientside external module system for the browser
- Host: GitHub
- URL: https://github.com/kelpycode/module.js
- Owner: KelpyCode
- License: gpl-3.0
- Created: 2017-11-06T00:06:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-06T00:44:53.000Z (over 8 years ago)
- Last Synced: 2025-01-18T09:52:38.547Z (about 1 year ago)
- Topics: javascript, javascript-library, module, require, requirejs
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# module.js
A lightweight clientside module system for the browser
## Files
Not sure which to use? Go for `module.min.js`
`module.js` is the script on which is being done development
`module.safe.js` is a browser safe version of the original, transpiled using Babel
`module.min.js` is `module.safe.js`, just minified.
## How to use it
First, you have to load `module.js`.
Simply do that by putting a `script` tag in the head (assuming you've put it onto your webserver).
Best is to put it as far to the top as possible.
```html
...
```
Now you've implemented `module.js` into your website!
Now you can use it in your scripts.
Below `` add the path to your script(s)
```html
```
For example, in `myscript.js` you put:
```js
Module("/path/to/mymodule.js", function(mymodule){ // Load the module at "/path/to/mymodule.js"
mymodule.hi(mymodule.test); // Exported variable mymodule is being used
// At fist "I am being loaded!" will be printer, after that
// "Hello!" will be printed in the console
})
```
And inside the module file `mymodule.js`:
```js
define(function(){
var out = {test: "Hello!", hi: console.log};
console.log("I am being loaded!");
return out;
});
```
## Loading multiple modules
That is easy.
```html
```
Simply pass an array instead of an string into the Module function
`myscript.js`:
```js
Module(["/path/to/logger", "/path/to/chat", "/path/to/navbar" ], function(logger, chat, navbar){
logger("Log stuff");
chat.init();
navbar.doSomething();
})
```
## Shortening flowork
You probably want to keep you script as small as possible.
You dont always want to type the `long/ass/path/toYourScript.js`.
Easy fix!
```js
Module.config({
"vendor": "/js/vendor",
"js": "/js",
"crypt": "/js/lib/crypto"
});
```
Now we can use `@vendor:someHandler` which gets replaced to `/js/vendor/someHandler.js`.
```js
Module.config({
"vendor": "/js/vendor",
"js": "/js",
"crypt": "/js/lib/crypto"
});
Module(["@vendor:someHandler", "@js:minifier", "@crypt:md5" ], function(someHandler, minifier, md5Hasher){
/*
...
*/
})
```
Also note: if no extension is given in the path, the path will be extended with `.js`.
## What about recursion?
_(recursion as in module1 requires module2 and module2 requires module1)_
Yes sorry, I haven't fixed that yet