StealJS is an ES6, AMD, CommonJS, and steal client-side loader. Combined with steal-tools, its designed to simplify dependency management while being extremely powerful and flexible.
Steal builds from SystemJS and ES6ModuleLoader and adds:
- global configuration
- css and less support
- plugin extension mapping (upcoming)
- production builds with steal-tools
But it's killer feature - progressively loaded apps that balance caching and the number of script requests.
StealJS supports IE8+ with AMD, CommonJS, and Steal syntax and IE9+ for ES6 syntax.
Lets see how to get a basic app up and running.
- Install StealJS:
With Bower
bower install steal#0.1.1 -S
- Create
stealconfig.js:
Add a stealconfig.js file directly within your "root" folder. Your
"root" folder should contain all your static scripts and resources.
By default, steal will assume stealconfig.js is a sibling of bower_components:
ROOT/
bower.json
bower_components
stealconfig.js
stealconfig.js will be loaded by every page in your project. It is used to configure
the location to modules and other behavior.
- Add
mainmodule:
Add a main.js to your project. This will load your apps other modules.
ROOT/
bower.json
bower_components
stealconfig.js
main.js
Within main.js add:
console.log("hello world");- Create an HTML page:
Create an index.html page that specifies the location of stealconfig.js and
the main module name:
ROOT/
bower.json
bower_components
stealconfig.js
index.html
Within index.html add:
<!DOCTYPE html>
<html>
<body>
<script src='./bower_components/steal/steal.js'
data-config='stealconfig.js'
data-main='main'></script>
</body>
</html>To build this app, read StealTools docs.
-
Install jQuery:
With Bower
bower install jquery -S
-
Configure jQuery's path and export:
Add a config for
System.pathstostealconfig.jsto tell steal where to find jQuery. Add a config forSystem.metato tell SystemJS that jQuery exports the "jQuery" variable.System.paths.jquery = "bower_components/jquery/dist/jquery.js"; System.meta.jquery = { exports: "jQuery" };
-
Load jQuery.
Import "jquery" with ES6 module syntax in main.js:
import $ from "jquery";
$(document.body).append("<h1>Hello World!</h1>");After cloning ...
-
Install npm modules
npm install
-
Install bower modules
bower install
-
Setup grunt watch
grunt watch
This will automatically build when anything in src change.
To test, open:
test/test.html
And make sure everything passes.