本文将从头开始编写实际的代码来完成一个angular2的demo。题外话是其实angular2官网的快速开始项目已经很酷炫了,但其侧重快速二字,只够拿来练习玩耍,倒是github上确实已经有了一些不错的angular2-starter。 1. 安装必要的node环境与npm当 ...
本文将从头开始编写实际的代码来完成一个angular2的demo。
题外话是其实angular2官网的快速开始项目已经很酷炫了,但其侧重快速二字,只够拿来练习玩耍,倒是github上确实已经有了一些不错的angular2-starter。
1. 安装必要的node环境与npm
当然TS环境也是必须的,目前TS已经更新到了2.1.5+,笔者使用的就是2.1.5版本,且最好使用2.0以上版本的TS,否则会有一些尴尬的问题(包括类型定义以及编译错误)。
2.关于编辑器
笔者使用的是VSCode,使用其他热门的编辑器都可以自己喜欢就行,甚至可以用VisualStudio(但是在网上见过有人用VS2015来开发涉及到npm包的项目,即使是Mac顶配版也能卡**)。
3. 底层目录结构
想象自己在写一个后台语言项目,我们所写的文件最终都要经过编译生成目标文件才运行,ng2也是这样,编写的是.ts文件,最终由我们配置好的编译器(webpack)进行编译生成目标代码并运行。
所以除了angular2依赖以外,必须配置好底层的webpack。所有的依赖包都通过前面安装的npm来安装。下面给出package.json:
1 { 2 "name": "angular2-demo-yitim", 3 "version": "1.0.0", 4 "description": "angular2 demo by yitim", 5 "keywords": [ 6 "angular2", 7 "webpack", 8 "typescript" 9 ], 10 "author": "yitim <635928008@qq.com>", 11 "license": "MIT", 12 "scripts": { 13 "build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js --progress --profile --bail", 14 "build:aot": "npm run build:aot:prod", 15 "build:dev": "npm run clean:dist && webpack --config config/webpack.dev.js --progress --profile", 16 "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .", 17 "build:prod": "npm run clean:dist && webpack --config config/webpack.prod.js --progress --profile --bail", 18 "build": "npm run build:dev", 19 "clean:dll": "npm run rimraf -- dll", 20 "clean:aot": "npm run rimraf -- compiled", 21 "clean:dist": "npm run rimraf -- dist", 22 "clean:install": "npm set progress=false && npm install", 23 "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled dll", 24 "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/", 25 "lint": "npm run tslint \"src/**/*.ts\"", 26 "server:dev:hmr": "npm run server:dev -- --inline --hot", 27 "server:dev": "webpack-dev-server --config config/webpack.dev.js --open --progress --profile --watch --content-base src/", 28 "server:prod": "http-server dist -c-1 --cors", 29 "server": "npm run server:dev", 30 "start": "npm run server:dev", 31 "tslint": "tslint", 32 "version": "npm run build", 33 "watch:dev:hmr": "npm run watch:dev -- --hot", 34 "watch:dev": "npm run build:dev -- --watch", 35 "watch:prod": "npm run build:prod -- --watch", 36 "watch": "npm run watch:dev", 37 "webdriver-manager": "webdriver-manager", 38 "webdriver:start": "npm run webdriver-manager start", 39 "webdriver:update": "webdriver-manager update", 40 "webpack-dev-server": "webpack-dev-server", 41 "webpack": "webpack" 42 }, 43 "dependencies": { 44 "@angular/common": "2.4.6", 45 "@angular/compiler": "2.4.6", 46 "@angular/core": "2.4.6", 47 "@angular/forms": "2.4.6", 48 "@angular/http": "2.4.6", 49 "@angular/platform-browser": "2.4.6", 50 "@angular/platform-browser-dynamic": "2.4.6", 51 "@angular/platform-server": "2.4.6", 52 "@angular/router": "3.4.6", 53 "@angularclass/conventions-loader": "^1.0.2", 54 "@angularclass/hmr": "~1.2.2", 55 "@angularclass/hmr-loader": "~3.0.2", 56 "core-js": "^2.4.1", 57 "crypto-browserify": "^3.11.0", 58 "crypto-js": "^3.1.9-1", 59 "http-server": "^0.9.0", 60 "ie-shim": "^0.1.0", 61 "reflect-metadata": "^0.1.9", 62 "rxjs": "5.0.2", 63 "zone.js": "0.7.6" 64 }, 65 "devDependencies": { 66 "@angular/compiler-cli": "2.4.6", 67 "@types/hammerjs": "^2.0.33", 68 "@types/node": "^7.0.0", 69 "@types/selenium-webdriver": "~2.53.39", 70 "@types/source-map": "^0.5.0", 71 "@types/uglify-js": "^2.0.27", 72 "@types/webpack": "^2.0.0", 73 "add-asset-html-webpack-plugin": "^1.0.2", 74 "angular2-template-loader": "^0.6.0", 75 "assets-webpack-plugin": "^3.5.1", 76 "awesome-typescript-loader": "~3.0.0-beta.18", 77 "codelyzer": "~2.0.0-beta.4", 78 "copy-webpack-plugin": "^4.0.0", 79 "css-loader": "^0.26.0", 80 "exports-loader": "^0.6.3", 81 "expose-loader": "^0.7.1", 82 "extract-text-webpack-plugin": "~2.0.0-rc.2", 83 "file-loader": "^0.10.0", 84 "find-root": "^1.0.0", 85 "gh-pages": "^0.12.0", 86 "html-webpack-plugin": "^2.28.0", 87 "imports-loader": "^0.7.0", 88 "istanbul-instrumenter-loader": "1.2.0", 89 "json-loader": "^0.5.4", 90 "ng-router-loader": "^2.1.0", 91 "ngc-webpack": "1.1.0", 92 "npm-run-all": "^4.0.1", 93 "optimize-js-plugin": "0.0.4", 94 "parse5": "^3.0.1", 95 "protractor": "^4.0.14", 96 "raw-loader": "0.5.1", 97 "rimraf": "~2.5.4", 98 "sass-loader": "^4.1.1", 99 "script-ext-html-webpack-plugin": "^1.5.0",100 "source-map-loader": "^0.1.5",101 "string-replace-loader": "1.0.5",102 "style-loader": "^0.13.1",103 "to-string-loader": "^1.1.4",104 "ts-node": "^2.0.0",105 "tslib": "^1.5.0",106 "tslint": "~4.4.2",107 "tslint-loader": "^3.3.0",108 "typedoc": "^0.5.3",109 "typescript": "~2.1.5",110 "url-loader": "^0.5.7",111 "webpack": "2.2.0",112 "webpack-dev-middleware": "^1.10.0",113 "webpack-dev-server": "2.2.1",114 "webpack-dll-bundles-plugin": "^1.0.0-beta.5",115 "webpack-merge": "~2.6.1"116 }117 }
原标题:Angular2 + Webpack项目搭建Demo
关键词:web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。