CourierJS is an ES6, AMD, CommonJS, and courier client-side loader.
CourierJS is designed to simplify dependency management while being extremely powerful and flexible.
Courier is a fork of StealJS, which builds from SystemJS and ES6ModuleLoader.
CourierJS supports IE8+ with AMD, CommonJS, and IE9+ for ES6 syntax.
#Why Courier?
Lets see how to get a basic app up and running.
- Install CourierJS:
With Bower
bower install courier#0.1.1 -S
- Create
courierconfig.js:
Add a courierconfig.js file directly within your "root" folder. Your
"root" folder should contain all your static scripts and resources.
By default, courier will assume courierconfig.js is a sibling of bower_components:
ROOT/
bower.json
bower_components
courierconfig.js
courierconfig.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
courierconfig.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 courierconfig.js and
the main module name:
ROOT/
bower.json
bower_components
courierconfig.js
index.html
Within index.html add:
<!DOCTYPE html>
<html>
<body>
<script src='./bower_components/courier/courier.js'
data-config='courierconfig.js'
data-main='main'></script>
</body>
</html>To build this app, read CourierTools docs.
-
Install jQuery:
With Bower
bower install jquery -S
-
Configure jQuery's path and export:
Add a config for
System.pathstocourierconfig.jsto tell courier 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.