即使是初学者也可以使用正式版本的Angular2+webpack来创建一个实用的文件夹结构环境！最后显示“Hello World”

1 年 ago
逸, 科
3 minutes

初次见面，我是犬派工程师小犬。发音是sainu。
我的GitHub账号是sa-inu。

我平时作为web工程师，使用Rails和AngularJS1.x系列进行开发。但是现在在开发团队内部，有关“是否应该将客户端迁移到Angular2”的讨论正在进行中。

因为我已经在一定程度上学习了Angular2，所以对于那些希望开始学习并且想要自己建立环境的人来说，我将提供一个简单易用但在商业项目中也可使用的实践性环境搭建。我还会介绍我在Angular1系列商业项目中使用的文件夹结构，并希望你能直接在此基础上展开，将其作为你开发项目的第一步。

因为我只是对这个领域有兴趣，所以如果方便的话，请在评论中指正我，这对我的学习也会有帮助，谢谢。

补记2016年10月26日

曾经撰写本文的作者是个技术菜鸟，像这篇文章一样手动搭建环境。
但是现在好像可以用 angular-cli 方便地创建 Angular2 的环境！
如果有兴趣的话，也可以试一试！

目标人群

    • これからAngular2を勉強したいAngular2初心者

 

    • 環境構築をquick starterじゃなくて自分で作りたい車輪の再発明系エンジニア

 

    • 英語の公式ドキュメントを読みたくない欲しがりエンジニア

 

    流行りに乗りたい波乗りエンジニア

环境

    • node 6.5.0

 

    npm 3.10.7

应用的技术

    • Angular2

 

    • webpack

 

    typescript

完成形 – 完成状态

源代码
https://github.com/sa-inu/angular2-sandbox-webpack/tree/master

※ 在其他分支中有以下的应用程序。会随时更新！

    • Hello World

 

    • TodoApp

 

    ルーティングをもつTodoApp

文件夹结构

angular2-sandbox-webpack
├── README.md
├── app
│    ├── components
│    │    └── hello-world
│    │         ├── hello-world.component.ts
│    │         └── hello-world.component.html
│    ├── app.component.ts
│    ├── app.module.ts
│    └── index.ts
├── index.html
├── node_modules
├── package.json
├── tsconfig.json
└── webpack.config.js

搭建开发环境

首先，我们将建立开发环境。我认为在这个环境构建过程中，很多想要尝试新技术的人遇到困难而放弃的情况是比较常见的。

我是一个勇敢的人。如果按照这个做，99%的情况下应该能够成功。☝️

安装所需的npm包

首先，使用专用命令生成npm版本管理所需的文件。
这类似于使用ruby的bundle init命令来生成Gemfile文件的操作。

$ npm init -y

接下来，将npm安装到项目中。

$ npm i -S @angular/{common,compiler,core,platform-browser,platform-browser-dynamic} core-js rxjs ts-loader zone.js
$ npm i -D ts-loader typescript webpack webpack-dev-server

以@angular开头的多个模块是Angular2的核心部分。通过使用{}，可以将多个模块一起安装。
core-js是用来在TypeScript输出的ES5源码中运行ES2015 Promise、Collections所需的polyfill。
关于rxjs，这篇文章很容易理解。简单来说，它可以很好地处理异步操作。
zone.js也是一样，它可以让我们很好地编写异步中间件。参考。

进行构建工具的设置

由于浏览器无法解析TypeScript，所以需要根据转换指示文件tsconfig.json将其转换（编译）为JavaScript。
为此，我们使用编译工具（编译器）tsc来进行转换，但是本次我们将使用tsc-loader在webpack中进行编译。

{
  "compilerOptions": {
    "target": "es5",
    "noImplicitAny": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node"
  },
  "filesGlob": [
    "./**/*.ts",
    "!./**/*.d.ts",
    "!./node_modules/**/*",
    "./node_modules/typescript/lib/lib.es6.d.ts"
  ],
  "files": [
    "./app/index.ts",
    "./node_modules/typescript/lib/lib.es6.d.ts"
  ]
}

const webpack = require('webpack');

module.exports = [
  {
    entry: {
      filename: './app/index.ts'
    },
    output: {
      filename: './dist/bundle.js'
    },
    // chromeの開発者ツールでコンパイル前のソースコードを見れるようにする
    devtool: 'source-map',
    resolve: {
      extensions: ['', '.ts', '.js']
    },
    module: {
      loaders: [
        { test: /\.ts$/, loader: 'ts-loader' }
      ]
    }
  }
]

因为我对这个名为ts-loader的存在不太了解，所以我决定绘制一张图来帮助理解。
我猜它大概是在做以下的事情（我没有看过webpack的代码，所以这只是我的推测，对不起）。

    1. 获取webpack在entry中指定的文件集合

 

    1. 从第一个获取的文件中，将带有.ts扩展名的文件使用ts-loader插件参考tsconfig.json文件将其转换为javascript（编译）

将文件以output指定的文件名进行输出

webpack.png

准备显示的初始HTML文件

在SPA（单页应用程序）中，只有第一张才通过HTTP通信加载HTML文件。因此，需要准备该HTML文件。

$ vim index.html
---以下をコピー&ペースト
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello Angular 2!</title>
  </head>
  <body>
    <my-app>Loading...</my-app>
    <!-- typescriptからコンパイルしたjavascriptファイルを読み込みます -->
    <script src="./dist/bundle.js"></script>
  </body>
</html>

创建Angular的核心

创建一个存放Angular主体的app文件夹。

$ mkdir app && cd $_

我将创建一个由webpack构建的入口文件。

$ vim index.ts

import 'core-js';
import 'zone.js/dist/zone';

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

platformBrowserDynamic().bootstrapModule(AppModule);

我们将创建一个app.module.ts文件来加载Angular模块。（我们会加载我们自己创建的模块以及第三方的模块。）请阅读代码注释，不会进行代码解释。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './components/hello-world/hello-world.component';

@NgModule({
  // 自分のNgModuleに他のNgModuleを取り込む際に使用
  // Angular2が提供している各種モジュールやサードパーティのモジュールをここに記述
  imports: [
    BrowserModule
  ],
  // Directive, Component, Pipeを登録
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  // アプリケーションのエントリポイントとなるComponentを指定
  bootstrap: [AppComponent]
})

export class AppModule {}

创建根组件。请阅读代码内的注释以了解说明。

// コンポーネントを作るために@angular/coreからComponentをimport
import { Component } from '@angular/core';

// Decorators構文
@Component({
  selector: 'my-app',
  // templateUrlとすると外部ファイルのパスを指定できる
  template: `
    <hello-world></hello-world>
  `
})

// AppComponentというコンポーネントを作る
export class AppComponent {}

我們將創建一個輸出”Hello World”的組件。在工作中，我們習慣將每個頁面分類到不同的文件夾中，這樣非常直觀明了，所以這次我們也會按照這種方式來創建。可以參考目錄結構的頁面。一般來說，我們可能會根據文件的類型將它們區分為組件（Component）、視圖（View）等。

$ pwd
=> /path/to/app
$ mkdir components && cd $_ && mkdir hello-world && cd $_

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

@Component({
  selector: 'hello-world',
  template: `
    <h1>Hello World</h1>
  `
})

export class HelloWorldComponent {}

如果要简单地做的话，就将其作为模板，直接编写HTML文件。但是考虑到现在已经开始了，还是把HTML文件剥离出来，通过templateUrl进行调用。

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

@Component({
  // <hello-world></hello-world>って感じで呼び出せるようになる
  selector: 'hello-world',
  // 相対パスで書きたい
  templateUrl: 'app/components/hello-world/hello-world.component.html'
})

export class HelloWorldComponent {}

我们将创建一个HTML文件，最后显示“Hello World！”。

$ pwd
=> path/to/app/components/hello-world
$ vim hello-world.component.html

<h1>Hello World!<h1>

搭建开发服务器

由于每次输入命令都很麻烦，所以我会搭建一个开发服务器。

安装webpack-dev-server

$ pwd
=> path/to/angular2-sandbox-webpack
$ npm i -D webpack-dev-server

编辑webpack.config.js

为了使用webpack-dev-server，我会稍微修改webpack.config.js文件。

const webpack = require('webpack');

module.exports = [
  {
    // 追記
    // webpack-dev-serverに/appディレクトリ以下を監視させます。
    // そうすると/appディレクトリ以下に変更が加わった場合、サーバーを自動で再読み込みしてくれます。
    content: __dirname + '/app',
    entry: {
      filename: './app/index.ts'
    },
    output: {
      filename: './dist/bundle.js'
    },
    // Enable to show code before compile
    devtool: 'source-map',
    resolve: {
      extensions: ['', '.ts', '.js']
    },
    module: {
      loaders: [
        { test: /\.ts$/, loader: 'ts-loader' }
      ]
    }
  }
]

接下来，在package.json中注册命令作为任务。

...(中略)...
  "scripts": {
    "start": "webpack-dev-server --progress --colors"
  },
...(中略)...

只需要一个选项 ：然后，启动服务器，访问localhost:8080，看看是否能显示出Hello World

$ npm run start
✖
广告
将在 10 秒后关闭
bannerAds