steal walkthrough
justinbmeyer edited this page May 9, 2012
·
3 revisions
- FASTER - packaging, multi-build
- light - small steal.js
- easy to install - work with requirejs / r.js
- dependency management
- building
- searchable content
- clean / linting
- instrumentation
- generators
- pluginify
The core dependency management part of StealJS is steal.
This example setup assumes you keep your JavaScript and CSS files in a "static" directory in your project. In this case, for a basic todo app, your directory layout might look like:
- todo-app/
- todo.html
- static
- todo.js
- todo.css
- helper/
- util.js
Step 1 : Download steal.js and copy it into the static folder so the "static" folder looks like:
- todo-app/
- todo.html
- static
- steal.js
- todo.js
- todo.css
- helper/
- util.js
Step 2 : In todo.html, add a script tag that loads steal and add a "data-main" attribute
that points to todo.js relative to steal.js like:
<!DOCTYPE html>
<html>
<head>
<title>Todos</title>
</head>
<body>
<h1>My Sample Project</h1>
<script data-main="todo.js" src="static/steal.js"></script>
</body>
</html>Step 3: Inside of todo.js, use steal( path, ... ) to load any scripts and css you need to run:
steal('todo.css','helper/util.js', function(){
// this function is called after todo.css and helper/util.js have finished loading
// if util.js itself has steals, this function will wait until those are also
// complete
})