Angular2 QuickStart + JSPM | Tagbangers Blog

Angular2 の RC5 がリリースされましたね。
NgModule という仕組みが追加されたようで、ついていくのが大変ですがどんどん便利になるのはわくわくしますね。

今回記事は、Angular2 の QuickStart を JSPM でアレンジした時のメモ。
あとからごにょごにょタスクを書きたくなるかもしれないので、gulp も入れました。

ソースコードはここにあります。

Step1 : npm で必要なパッケージをインストール

npm init -y

npm install \
babel-preset-es2015 --save-dev \
babel-register --save-dev \
typings --save-dev \
jspm@beta --save-dev \
gulp --save-dev \
gulp-webserver --save-dev

Step2 : jspm で必要なパッケージをインストール

node_modules/.bin/jspm init

Configuration file jspm.config.js does not exist, create it? [Yes]:
Init mode (Quick, Standard, Custom) [Quick]:
Local package name (recommended, optional):
package.json directories.baseURL: src
package.json configFiles folder [src\]:
Use package.json configFiles.jspm:dev? [No]:
SystemJS.config browser baseURL (optional): /
SystemJS.config transpiler (Babel, Traceur, TypeScript, None) [babel]: TypeScript

node_modules/.bin/jspm install \
npm:@angular/core \
npm:@angular/platform-browser-dynamic \
reflect-metadata

Step3 : src/jspm.config.js を編集する

SystemJS.config({
  ...
  packages: {
    "app": {
      "defaultExtension": "ts"
    }
  }
  ...
});

Step4 : package.json を編集する

{
  ...
  "scripts": {
    "prepublish": "typings install && jspm install",
    "start": "gulp webserver",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

Step5 : tsconfig.json を作成する

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Step6 : typings.json を作成する

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160807145350"
  }
}

Step7 : typings をインストール

node_modules/.bin/typings install

Step8 : .babelrc を作成する

{
  "presets": ["es2015"]
}

Step9 : gulpfile.babel.js を作成する

import gulp from 'gulp';
import webserver from 'gulp-webserver';

gulp.task('webserver', () => {
  gulp.src('src')
    .pipe(webserver({
      livereload: {
        enable: true
      },
      open: true
    }));
});

Step10 : src/app/app.component.ts を作成

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

Step11 : src/app/app.module.ts を作成

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step12 : src/app/main.ts を作成

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Step13 : src/index.html を作成

<html>
<head>
<title>Angular 2 QuickStart By JSPM</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<script src="/jspm_packages/system.js"></script>
<script src="/jspm.config.js"></script>
<!-- 2. Configure SystemJS -->
<script>
SystemJS.import("/app/main");
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

Step14 : 実行してみる

npm start

うん、まぁこれだけ。