新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

环境

windows 10

准备工具

Visual Studio Code
Node.js
Git

需求

必须支持IE8

步骤开始：

执行命令行工具

mkdir Demo && cd Demo

npm init

name: demo

version:0.0.1

description:This is a demo.

entry point:[Enter]

test command:[Enter]

git repository:[Enter]

keywords:[Enter]

author:羊驼

license:[Enter]

Is this ok? (yes) [Enter]

启动Visual Studio Code

code .

编辑package.json文件

{
  "name": "demo",
  "version": "0.0.1",
  "private": false,
  "description": "This is a Demo.",
  "author": "羊驼"
}

创建一个Git本地仓库

git init

创建 README.md

echo This is a Demo. > README.md

通过NPM安装bootstrap及相关依赖

npm install --save -d bootstrap

npm install --save -d html5shiv

npm install --save -d respond.js

--save 参数可以自动将安装的内容加入package.json文件中dependencies中

-d 参数我比较喜欢加，可以看到一些详细安装过程

html5shiv 和 respond.js 这个算提前安装吧，主要是为了照顾IE8

创建默认页面

通过Visual Studio Code在工作区根目录下添加default.htm文件。

这里推荐安装一个Visual Studio Code的插件：Bootstrap 3 Snippets

编辑default.htm文件，这里只利用了bootstrap的CSS内容。如果安装了插件，可以输入bs3-template快速构建页面内容。最终编辑结果如下：

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>

        <!-- Bootstrap CSS -->
        <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="./node_modules/html5shiv/dist/html5shiv.js"></script>
            <script src="./node_modules/respond.js/dest/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1 class="text-center">Hello World</h1>
    </body>
</html>

通过.gitignore控制Git忽略node_modules目录

node_modules 文件夹通常不提交到源代码服务器，所以需要忽略掉

echo node_modules > .gitignore

安装http-server

npm install -g -d http-server

-g 参数可以全局安装

对于一个环境，全局安装执行一次就可以了。

启动web服务进行验证

http-server

默认启动8080端口，也可以自己指定。在浏览器中输入 http://localhost:8080/default.htm 可以看到 Hello World 。

通过开发者调试工具，可以检查是否已正确加载所有文件。截图调试的时候启用仿真，文档模式为IE8。

安装typescript

npm install -g -d typescript

全局安装是为了执行命令

npm install --save-dev -d typescript

--save-dev 可以自动保存安装的包加入package.json中的 devDependencies

添加app.ts文件并编辑

这里先添加一段示例代码，代码来自 http://www.typescriptlang.org/play/index.html

function Greeter(greeting) {
    this.greeting = greeting;
}

Greeter.prototype.greet = function() {
    return "Hello, " + this.greeting;
}

// Oops, we're passing an object when we want a string. This will print 
// "Hello, [object Object]" instead of "Hello, world" without error.
let greeter = new Greeter("world");  

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
    alert(greeter.greet());
};

document.body.appendChild(button);

通过app.ts文件生成app.js

tsc app.ts

编译成功，可以查看生成的js文件，有兴趣的可以尝试执行一下

添加tsconfig.json配置

在工作区添加文件tsconfig.json并编辑

{
    "compilerOptions": {
        "target": "es3",
        "noImplicitAny": false,
        "module": "amd",
        "removeComments": false,
        "sourceMap": true,
        "outDir": "."
    },
　　"exclude": [ "node_modules" ]
}

target:es3 使用ECMAScript 3

noImplicitAny: false 当noImplicitAny 标志为 false 的时候,如果编译器不能根据变量的使用来推断变量的类型,直接默认为 any 类型.

module:amd

removeComments:false 是否移除注释

sourceMap:true 生成map文件，一会调试的时候可以看到

outDir:. 编译输出js的文件夹

exclude:[ "node_modules" ] 编译的时候排除 node_modules 下的内容

重新输入命令进行编辑

tsc

在 default.htm 中引用 app.js 并调试

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>

    <!-- Bootstrap CSS -->
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
            <script src="./node_modules/html5shiv/dist/html5shiv.js"></script>
            <script src="./node_modules/respond.js/dest/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <h1 class="text-center">Hello World</h1>

    <script src="app.js"></script>
</body>

</html>

由于使用map，调试的时候可以直接使用 app.ts

安装 gulp 和 gulp-typescript 用于编译

npm install --save-dev -d gulp

npm install -g -d gulp-cli

npm install --save-dev -d gulp-typescript

npm install --save-dev -d pump

npm install --save-dev -d gulp-sourcemaps

gulp-cli 帮助在命令提示符中执行gulp命令

gulp-sourcemaps 帮忙生成map文件

添加 gulpfile.js 文件（后续考虑使用 gulpfile.ts？）

var gulp = require('gulp');
var pump = require('pump');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

// ts 编译
gulp.task('default', [], function (cb) {
    var tsProject = ts.createProject('tsconfig.json');

    pump([
        gulp.src(['*.ts']),
        sourcemaps.init({ loadMaps: true }),
        tsProject(),
        sourcemaps.write('.'),
        gulp.dest('.')
    ], cb);
});

执行 gulp 命令生成 app.js 和 app.js.map

gulp

Visual Studio Code配置生成任务

【查看】-> 【命令面板】-> 输入【任务:配置任务运行程序】（保留前面的 >）
选择 gulp，在工作空间的根目录下的【.vscode】，会生成一个 tasks.json
【查看】-> 【命令面板】-> 输入【任务:运行生成任务】，也可以使用默认快捷键 Ctrl + Shift + B

tasks.json内容如下：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "default",
            "args": [],
            "isBuildCommand": true,
            "isWatching": false,
            "problemMatcher": [
                "$lessCompile",
                "$tsc",
                "$jshint"
            ]
        }
    ]
}

添加 angularjs 和 requirejs

npm install --save -d angular@1.2.32

npm install --save -d requirejs

npm install --save -d angular-ui-router

[email protected] 这里指定了版本，为了兼容IE8而努力

angular-ui-router 习惯使用这个做路由

安装 angularjs 和 requirejs 等相关的 TypeScript definitions

npm install --save-dev @types/angular

npm install --save-dev @types/requirejs

npm install --save-dev @types/jquery

npm install --save-dev @types/angular-ui-router

创建startup.ts文件

'use strict';

require.config({
    baseUrl: './',
    waitSeconds: 2,
    paths: {
        'angular': './node_modules/angular/angular',
        'angular-ui-router': './node_modules/angular-ui-router/release/angular-ui-router',
    },
    shim: {
        'angular': { exports: 'angular' },
        'angular-ui-router': { exports: 'angular-ui-router', deps: ['angular'] },
    },
});

require([
    'angular',
    'app'
], function (angular, app) {
    angular.element(document).ready(function () {
        angular.bootstrap(document, [app.WebApp.Instance['name']]);
        angular.element(document).find('html').addClass('ng-app');
    });
});

修改app.ts文件

import angular = require('angular');
import 'angular-ui-router';

export module WebApp {
    'use strict';

    export const Instance = angular.module('Questionnaire', ['ui.router']);
    Instance.config(['$stateProvider', '$urlRouterProvider', ($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) => {
        $stateProvider
            .state('home', {
                url: '/home',
                template: 'Hello Word!',
            });

        $urlRouterProvider.otherwise('/home');
    }]);
}

修改default.htm文件

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>

    <!-- Bootstrap CSS -->
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
            <script src="./node_modules/html5shiv/dist/html5shiv.js"></script>
            <script src="./node_modules/respond.js/dest/respond.min.js"></script>
        <![endif]-->
    <script src="./node_modules/requirejs/require.js" defer async="true" data-main="startup.js"></script>
</head>

<body>
    <div data-ui-view>Loading</div>
</body>

</html>

重新编译后测试成功，显示Hello Word!

调整目录结构为发布做准备

项目开发完成以后，可以考虑三个问题

JS、CSS和HTML的压缩
静态资源的缓存问题，由于浏览器缓存，如果静态资源不做好版本控制将有缓存问题
第三方类库的引用问题，当前引用的都是node_modules目录下的，可以考虑使用公开的CDN

做这些事情前，我们对项目的目录结构做了一些调整，源文件放入src目录，发布的文件放入dist目录，调整后的目录结构如下图

PS：记得相应的调整引用的路径；调整 gulpfile.js 中编译任务的 src 为'src/**/*.ts'，dest为'src'

当前测试访问路径为 http://localhost:8080/src/default.htm#/home，测试通过后继续

静态资源的文件名hash（仅示例JS）

安装所需要的工具

npm install --save-dev -d gulp-rev

npm install --save-dev -d sog-gulp-rev-collector

修改 gulpfile.js 文件，增加一个deploy任务

gulp.task('deploy', [], function (cb) {
    var tsProject = ts.createProject('tsconfig.json');

    pump([
        gulp.src(['src/**/*.ts']),
        sourcemaps.init({ loadMaps: true }),
        tsProject(),
        rev(),
        sourcemaps.write('.'),
        gulp.dest('dist')
    ], cb);
});

执行deploy任务

gulp deploy

可以看到在dist目录下生成的js文件都增加了hash码

其余类型的文件可以自己尝试，除了默认的default.htm都需要在文件名中加入hash码

静态资源的压缩（仅示例htm）

安装 gulp-htmlmin

npm install --save-dev -d gulp-htmlmin

调整gulpfile.js文件

gulp.task('deploy-tsc', [], function (cb) {
    var tsProject = ts.createProject('tsconfig.json');

    pump([
        gulp.src(['src/**/*.ts']),
        sourcemaps.init({ loadMaps: true }),
        tsProject(),
        rev(),
        sourcemaps.write('.'),
        gulp.dest('dist')
    ], cb);
});

gulp.task('deploy-htm', [], function (cb) {
    pump([
        gulp.src(['src/**/*.htm']),
        htmlmin({
            collapseWhitespace: true,
            removeComments: true
        }),
        gulp.dest('dist')
    ], cb);
});

gulp.task('deploy', ['deploy-htm', 'deploy-tsc']);

其他类型的文件（包括图片等）可以引入不同的工具来完成

替换其他文件中的引用

在对文件名加入hash码的任务中加入生成manifest文件的内容

gulp.task('deploy-tsc', [], function (cb) {
    var tsProject = ts.createProject('tsconfig.json');

    pump([
        gulp.src(['src/**/*.ts']),
        sourcemaps.init({ loadMaps: true }),
        tsProject(),
        rev(),
        sourcemaps.write('.'),
        gulp.dest('dist'),
        rev.manifest('js.json'),
        gulp.dest('rev')
    ], cb);
});

再次执行deploy任务，目录中多了rev文件夹

增加资源替换任务

gulp.task('deploy-replace', ['deploy-htm', 'deploy-tsc'], function (cb) {
    pump([
        gulp.src(['dist/**/*.htm', 'dist/**/*.js']),
        revCollector(['rev/**/*.json']),
        gulp.dest('dist')
    ], cb);
});

gulp.task('deploy', ['deploy-replace', 'deploy-htm', 'deploy-tsc']);

执行完任务后进行测试，访问 http://localhost:8080/dist/default.htm#/home

替换CDN路径

仿照rev目录下的js.json添加manifest.json

{
    "../node_modules/bootstrap/dist/css/bootstrap.min.css": "//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.css",
    "../node_modules/html5shiv/dist/html5shiv.js": "//cdn.bootcss.com/html5shiv/r29/html5.min.js",
    "../node_modules/respond.js/dest/respond.min.js": "//cdn.bootcss.com/respond.js/1.4.2/respond.min.js",
    "../node_modules/requirejs/require.js": "//cdn.bootcss.com/require.js/2.3.2/require.min.js",
    "../node_modules/angular/angular.js": "//cdn.bootcss.com/angular.js/1.2.32/angular.js",
    "../node_modules/angular-ui-router/release/angular-ui-router.js": "//cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.min.js"
}

修改资源替换任务

gulp.task('deploy-replace', ['deploy-htm', 'deploy-tsc'], function (cb) {
    pump([
        gulp.src(['dist/**/*.htm', 'dist/**/*.js']),
        revCollector(['manifest.json', 'rev/**/*.json']),
        gulp.dest('dist')
    ], cb);
});

重新生成后测试如下