Angular CLI (命令行界面)

我曾经认为要使用Angular2需要写很多gulp脚本和其他复杂的设置，但是当我开始使用angular-cli时，它可以通过一个命令来创建一个项目的框架（包括Angular、TypeScript、css/less/sass/stylus和html），让我在5分钟内就可以开始开发。而且我还在一篇文章中看到了使用angular-cli来添加pug（2017/02/25时的方法）。

关于pug（Jade）的导入问题

这是一个可以以爆炸速度轻松编写HTML的模板引擎。由于Angular2 (Angular) 采用了组件化的方法，因此可能不经常编写长HTML，但是当我们需要进行一些复杂操作时，编写HTML就会变得很繁琐，因此决定引入此模板引擎。

引入 angular-cli.

大家都喜欢使用 npm 来进行安装，但最近似乎 yarn 很受欢迎，所以我尝试使用 yarn 进行安装。使用方法与 npm 几乎没有区别，而且速度快。

# yarn インストール
> npm i -g yarn

# angular-cli インストール
> yarn global add angular-cli

创建示例项目并提取webpack.config.js。

在内部进行webpack构建，所以想要修改webpack.config.js以添加pug，但找不到该文件。现在我们隐藏了它，以防止混淆那些想要保持原设置不变的用户。为此，我们提供了eject命令以进行提取。

# hello-world プロジェクト作成
> ng new hello-world

# webpack.config.js を抽出(ng eject)
> cd hello-world
> ng eject

我会在项目的根目录中检查是否存在 webpack.config.js 文件。

hello-world/
|.angular-cli.json
|.editorconfig
|.gitignore
|karma.conf.js
|package.json
|protractor.conf.js
|README.md
|tslint.json
|yarn.lock
|webpack.config.js ★ ここに抽出されます
+node_modules/
+e2e/
+src/

安装 webpack 和 webpack-dev-server。

使用默认设置时，不需要执行这个步骤，但是在 eject 项目中，需要单独安装 webpack。

> yarn add webpack-dev-server --dev
> yarn add webpack --dev

在这里，我将确认一下该项目是否正常运行。

> yarn start

如果webpack构建成功，并且在浏览器中打开 http://localhost:8080 等网址后，页面能够正常显示，则表示运行正常。

修改webpack.config.js文件，并安装pug-html-loader插件。

在module / rules中，添加(pug|jade)的配置。

...
module.exports = {
...
  "module": {
    "rules": [
      ...
      {
        "test": /\.json$/,
        "loader": "json-loader"
      },
      // ★追加。拡張子が、pug|jade なら、pug-html-loader を利用
      {
        "test": /\.(pug|jade)$/,
//        "loader": "pug-html-loader"  // 2017/05/20修正。コメント頂きました。raw-loader も必要かも？
          "loader": ['raw-loader', 'pug-html-loader'] // 'raw-loader' が必要
      },
      {
        "test": /\.html$/,
        "loader": "raw-loader"
      },

由于angular-cli中不包含pug-html-loader，因此需要进行安装。

> yarn add pug-html-loader --dev

试着构建 pug 文件。

由于以下文件是默认生成的，将html文件重命名为pug文件，并将其内容改写为pug。同时，将引用html的ts文件修改为引用pug。

src 以下のフォルダ構成

src/
+app/
  app.component.css
  app.component.html    # ★ .html -> .pug にリネーム
  app.component.spec.ts
  app.component.ts

.html の中身

<h1>
  {{title}}
</h1>

.pug にして、中身も書き換える。

h1
  | {{title}}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.pug',  // ★ .html -> .pug にリネーム
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

关于CSS，只需更改文件扩展名即可使用less/sass/scss/stylus。

另外，您只需执行以下命令，即可将生产用代码输出到 dist/ 文件夹中。

> yarn build

填补

由于部分的Angular2语法在pug中会导致编译错误，所以需要以逗号隔开或用单引号括起来进行更改。
引用属性 | pug

# カンマなし。error (click) が解釈できない
div(class='div-class' (click)='play()')

# カンマあり。ok (click) が解釈できる
div(class='div-class', (click)='play()')

多余的东西

Angular2 被广泛认为学习成本较高，但与混乱演化的 Angular1 相比，Angular2 已经变得精致许多。通过一条命令即可创建项目，只需学习与目标相关的必要概念，如服务和组件，看似可以学习到「无论如何都应该学习的知识」。因此，如果您想尝试一下但觉得有些困难，可以考虑使用 Google Chrome 的页面翻译功能，将易于理解的官方教程以日语进行享受。
教程：英雄之旅

蛇足的第二个

我觉得使用Visual Studio Code进行开发非常舒适。

以上就是。