Mam owns language-Agnostic Modules. This is the base MAM project.
- MAM: сборка фронтенда без боли (in Russian, see automatic English translation)
- Step-by-step tutorial (in Russian, see automatic English translation)
- Agnostic modules. Module is a directory with the mixed source files (JS, TS, CSS, JSON, HTML, Tree, images, etc).
- Automatic dependency tracking. You don't need import/export - simply use the namespaced names according to the directory structure, like
$mol_button_major
/$jin.time.moment
in*.JAM.JS
/*.TS
or--mol_theme_back
/[mol_page_title]
/.my-header-avatar
in*.CSS
. - Development server with automatic bundling on request. Will be bundled only if you use it.
- Build any module as standalone bundle. You can develop thousand of modules in one project.
- Cordova project generation. Simply add
config.xml
to the module, and-cordova
dir with the cordova project will be generated.
Checkout this repo (~2s):
git clone https://github.com/hyoo-ru/mam.git ./mam && cd mam
$mol_build
and typescript uses inotify by default on Linux to monitor directories for changes. It's not uncommon to encounter a system limit on the number of files you can monitor.
/etc/sysctl.d/20-watch.conf
fs.inotify.max_user_watches=524288
fs.file-max=500000
Install node modules and build dev server from actual sources
npm install
Start dev server:
npm start
Open simple $mol based ToDoMVC application:
start http://localhost:9080/hyoo/todomvc/-/test.html
- Execute
npm start hyoo/todomvc
to build standalone ToDoMVC application athyoo/todomvc/-
. - Execute
npm start mol/regexp
to build standalone $mol_regexp library atmol/regexp/-
.
npm start mol/regexp
npm publish mol/regexp/-
const { $mol_regexp: RE } = require( 'mol_regexp' )
import { $mol_regexp as RE } from 'mol_regexp'
Using $node
namespace you can auto-install and dynamically lazy load any NPM packages:
const isOdd = $node['is-odd']( '123' )
If possible, try to use the existing MAM ecosystem implementations. You can bundle the NPM packages as well via an adapter like:
// lib/ramda/ramda.ts
namespace $ {
export let $lib_ramda = require('ramda/src/index.js') as typeof import('ramda')
}
- Create dir for your namespace:
my
in example. - Create dir for your module:
my/alert
in example. - Create module source file:
my/alert/alert.ts
with contentfunction $my_alert( msg : string ) { alert( msg ) }
in example. - Create dir for your application module:
my/app
in example. - Create application source file:
my/app/app.ts
with content$my_alert( 'Hello, World!' )
in example. - Create application web entry point:
my/app/index.html
with content<script src="-/web.js"></script>
in example. - Start development server:
npm start
- Open your application:
http://localhost:9080/my/app/-/test.html
in example.