About Me

Name: @Quramy
Angular力: ドラゴンボールで言うと餃子くらい(そこら辺の幼稚園児よりは書けるけどナッパみたいなやつにはかてない)
趣味: 自作したVimのTypeScript用プラギンをメンテすること

TL;DR;

「ビルドタスクを書ける奴はPrjに1人いればいい」

...マジで言ってんの？

自分で書けるようになった方が良い

Today's theme: Module bundler

Weapon of choice?

webpack

v2.xからはTree Shaking(import した対象のみbundleする機構)がデフォルトで利用可能に。angular-cli等、公式でも採用されている。
「何でも出来てしまう」ツールなので、使い方を間違うとwebpackと心中する羽目になる.

Rollup

ES2015に最適化されたTree Shakingは魅力。Webpack2よりもbundleのサイズを削れるとの報告も.

SystemJS/JSPM

Angular.ioのtutorialに記載されているものの、使う必然性がない。唯一の利点はPlunkerで動作させることが可能な点か。

Browserify

特に書くことが思い浮かばない。

でもwebpackと心中したくない

e.g. CSS pre-processor

こんなコード、書いちゃってない？

@Component({
  template: `<h1>hello</h1>`,
  styles: [require('raw-loader!sass-loader!./my-app.component.scss')],
})
export class MyApp {}

Locking into module bundler

CSSとかrequireもimportもできないから。
それwebpackと心中する覚悟あるって意味だけど、大丈夫？

話は逸れるが、CSS Modules使ってる奴はそれぐらいの覚悟あるってことなんだろうな？

angular2-template-loader

styleUrls: ['./my-app.component.scss']

styles: [require('./my-app.component.scss')],

と変換されれば、ソースコードからwebpack依存を引っぺがせる

@Component({
  template: `<h1>hello</h1>`,
  styleUrls: ['./my-app.component.scss']
})
export class MyApp {}

これをやってるのがangular2-template-loader.

How to write configure file

webpack.config.js

modules: {
  loaders: [
    {
      test: "\.component\.ts$", exclude: /node_modules/,
      loaders: [
        "awesome-typescript-loader",
        "angular2-template-loader", /* これ */
      ]
    },
    {
      // Scssの場合
      test: "\.component\.scss$",
      loaders: [ "raw-loader", "sass-loader" ]
    },
    {
      // Post CSSの場合
      test: "\.component\.css$",
      loaders: [ "to-string-loader", "css-loader", "postcss-loader" ]
    },
  ]
}

Remarks

angular2-template-loaderは只の文字列置換なので注意。

もしservice中にtemplateUrlっていうキーがあるとtemplate: require()に変換されるぞ！

input

myMethod() {
  const hoge = {templateUrl: "foo"};
  return hoge;
}

output

myMethod() {
  const hoge = {template: require("foo")};
  return hoge;
}

e.g. Routing

const routes: Routes = [
  {
    path: "sub",
    loadChildren: "./submodule#SubModule"
    // loadChildren: () => new Promise((resolve) => {
    //   require.ensure([], (require) => {
    //     resolve(require("./submodule")["SubModule"];
    //   });
    // })
  }
];