- install jspm beta:
npm install -g jspm@beta - set up your project:
jspm init - install dependencies:
jspm install angular2 reflect-metadata zone.js es6-shim
This will create a jspm_packages folder, and a config.js file.
Open the config.js file - this file manages options for the System.js loader - tweak it as appropriate
System.config({
"baseURL": "/",
"defaultJSExtensions": true,
"transpiler": "typescript",
//add this if using typescript
"typescriptOptions":{
"module":"commonjs",
"emitDecoratorMetadata": true
},
//add this if using traceur
"traceurOptions": {
"annotations" : true,
"memberVariables" : true,
"types" : true
},
//add this if using babel
"babelOptions": {
"optional" : ["runtime"],
"stage" : 1
},
"paths": {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
//this lets us use app/ for our package as a sort of virtual directory
"app": "src"
},
//this configures our app paths
"packages": {
"app": {
"main": "main",
"defaultExtension": "js" //or "ts" for typescript
}
}
});Create a new src directory, and a main.js or main.ts file inside of it:
//import deps
import 'zone.js';
import 'reflect-metadata';
//you may need es6-shim if you get an error relating to list.fill
//import es6-shim;
//if using traceur compiler:
import {
ComponentAnnotation as Component,
ViewAnnotation as View,
bootstrap
} from 'angular2/angular2';
//OR
//if using babel or typescript compiler:
import {
Component,
View,
bootstrap
} from 'angular2/angular2';
//create a simple angular component
@Component({
selector: 'test-app'
})
@View({
template: '<h4>Hello {{name}}</h4>'
})
class TestApp {
name: string;
constructor(){
this.name = 'Angular2';
setTimeout(() => {
this.name = 'Angular2!!!'
},1500);
}
}
//start our app
bootstrap(TestApp);Create an index.html page:
<html>
<head>
<title>Demo App</title>
<!-- systemJS loader and config -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
</head>
<body>
<!-- our angular2 component -->
<test-app>
Loading...
</test-app>
<!-- import and run our app -->
<script>
System.import('app');
</script>
</body>
</html>Start a local server http-server or python -m SimpleHTTPServer and open localhost:8080 in your browser.
jspm bundle app dist/main.js --inject- outputs a single bundle and adds it to the config file, SystemJS will load it instead of 11ty files.jspm bundle app dist/main.min.js --minify- outputs a minified single bundle you can include in a script tag after System.js and your config.jspm bundle-sfx app dist/main.sfx.js- outputs a single file you can include without any other dependencies.
So far so good everything seems to work. Last issue is the amount of single js file that get loaded each time.(jspm/jspm-cli#482)
It works so far that I can load the bundle with --inject but that means I can't really change any file which voids this option.
When I try what is suggested in the issue (jspm bundle 'src/js//*' - '[src/js//*]' dev-deps.js --inject) JSPM still reloads all files.
Anyone got this working yet?