搭建前端项目架构

来源：互联网发布：网络非法赌博编辑：程序博客网时间：2024/04/29 14:29

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

环境

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

angular@1.2.32 这里指定了版本，为了兼容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);});

重新生成后测试如下

提交代码

git add .

git commit -m "初始化项目"

完整代码

https://github.com/mayong43111/demo

阅读全文

1 0