在gulp+webpack的环境下使用Angular2创建HelloWorld

3 年 ago
文, 翔
2 minutes

因为想使用Angular2，所以先看了官方的5分钟快速入门，发现它使用了SystemJS。
我并不太熟悉SystemJS，平常都使用webpack，所以希望能用webpack来运行它。
顺便说一下，我希望用gulp一键编译，所以我想写一篇关于如何在gulp+webpack环境下运行Angular2的方法。
顺便提一下，我使用的是Angular2的rc4版本。
希望它能尽快正式发布。

必需品

    • npm

 

    • webpack

ts-loader

gulp

gulp-webpack

安装Angular2

执行下面的命令，使用npm来安装Angular2。
这次我们将使用@angular/platform-browser-dynamic和@angular/core，但是为了保险起见，我们会将所有与Angular2相关的组件都安装上。

npm i -S @angular/common @angular/compiler @angular/core @angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic @angular/router @angular/router-deprecated @angular/upgrade rxjs@5.0.0-beta.6 zone.js@0.6.12 core-js

创建文件

创建一个用于加载和运行Angular2的HTML文件(index.html)，以及作为入口点的ts文件(myapp.ts)。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Hello Angular 2!</title>
</head>
<body>
　<!-- ここにMyAppComponentを挿入する -->
  <my-app>Loading…</my-app>
</body>
<!-- webpackで結合後のjsファイルの読み込み-->
<script src="./bundle.js"></script>
</html>

import "core-js";
import "rxjs/Rx";
import "zone.js/dist/zone";

import {bootstrap} from "@angular/platform-browser-dynamic";
import {Component} from "@angular/core";
// myAppコンポーネント定義
@Component({
  selector: "my-app",
  template: `
    <h1>Hello World!</h1>
  `
})
class MyAppComponent {
}
//index.htmlで使うための準備
bootstrap(MyAppComponent);

webpack的配置

将webpack.config.js文件设置如下。

module.exports = {
    // エントリーポイント
    entry:'./app.ts',
    // 出力するファイル名
    output: {
        filename: './bundle.js'
    },
    // 依存関係
    resolve: {
        root:['./node_modules'],
        extensions:['', '.webpack.js', 'web.js', '.js', '.ts']
    },
    // TypeScriptを読み込むためのloader
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' }
        ]
    }
}

gulp的设置

将gulp.js写成以下格式。
基本设置在webpack中已经完成，因此这部分设置并没有太多内容，基本上只是调用的操作。

var gulp = require('gulp');

var webpack = require('gulp-webpack');
var webpackConfig = require('./webpack.config.js');

// TypeScriptのコンパイルとwebpackの実行
gulp.task('ts', function () {
    // TypeScriptのコンパイル
    var tsResult = gulp.src(['./*.ts'])
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('./'));
});

// コマンドで「> gulp」と入力したときのタスク
gulp.task('default', ['ts']);

编译

如果你到这一步了，只需要执行gulp命令，就会生成bundle.js文件。由于Angular2的依赖关系也已经解决了，所以在index.html中只需要就可以使用创建的组件了。

bannerAds