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:
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.
With Bower
bower install steal#0.1.1 -S
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.
main module: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 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.paths to stealconfig.js to tell steal where to find
jQuery. Add a config for System.meta to 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.
FAQs
Gets JavaScript.
We found that steal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.