关于我

• Name: @Quramy

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

---

太长不看

---

只要有一个能写构建任务的人在项目中就足够了。

---

你是认真的吗？
(Nǐ shì de ma?)

---

最好能够自己写。

---

今天的主题是模块打包工具

---

喜欢使用的武器吗？

webpack -> webpack

从v2.x版本开始，Tree Shaking（仅打包导入的目标）机制默认可用。Angular-cli等官方也采用了它。
由于它是一种”可以做任何事情”的工具，如果使用不当，可能会导致与webpack共存的问题。

滚动

Tree Shaking针对ES2015进行了优化，非常吸引人。还有报道称，它与Webpack2相比可以减小bundle的大小。

SystemJS和JSPM

尽管Angular.io的教程中提到了这一点，但实际上并没有必要使用它。唯一的好处就是可以在Plunker上运行。

浏览器化

我想不出特別要写的事情。

---

但我不想和webpack一同消亡。

---

例如，CSS预处理器

你写过这样的代码吗？

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

---

锁定到模块打包者

因为无法使用CSS、require和import，所以需要webpack来解决这个问题。你准备好了吗？

说起来有点离题，但是使用CSS Modules的人应该有着这种程度的觉悟吧？

---

Angular2模板加载器

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处理。

---

如何编写配置文件

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" ]
    },
  ]
}

---

评论

请注意，angular2-template-loader仅是字符串替换。

如果服务中存在一个名为”templateUrl”的键，它将转换为”template: require()”！

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

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

---

例如：路由

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

modules: {
  loaders: [
    {
      test: "\.routing\.ts$", exclude: /node_modules/
      loaders: [
        "awesome-typescript-loader",
        "es6-promise-loader",
        "angular2-load-children-loader",
      ]
    }
  ]
}

---

为了掌握编写（也称为网页设计）的技能 ?

来练筋吧！好的身体靠好的底子

---

我们来做肌肉训练吧！

npm init から始めて、自分で1からwebpack.config.jsを書いてみる
最初は写経でも良い
GitHub Pages等にbundleをdeployするところまでタスクを作成してみる
ディレクトリ構成をどのようにすべきか、等 module bundler以外の知識も色々得られるはず
build筋はAngular以外のプロジェクトでも活きる

---

良好的构建取决于良好的种子。

具备基本体力的人会经常偷窥成功的经验，并偷走其中的技巧。应该能够获取到类似「原来还有这种加载器」的见识。

angular/angular-cli

AngularClass/angular2-seed

AngularClass/angular2-webpack-starter

---

谢谢！!)