你的位置:首页 > 软件开发 > Java > Angular2 + Webpack项目搭建Demo

Angular2 + Webpack项目搭建Demo

发布时间:2017-02-19 00:01:01
本文将从头开始编写实际的代码来完成一个angular2的demo。题外话是其实angular2官网的快速开始项目已经很酷炫了,但其侧重快速二字,只够拿来练习玩耍,倒是github上确实已经有了一些不错的angular2-starter。 1. 安装必要的node环境与npm当 ...

Angular2 + Webpack项目搭建Demo

本文将从头开始编写实际的代码来完成一个angular2的demo。

题外话是其实angular2官网的快速开始项目已经很酷炫了,但其侧重快速二字,只够拿来练习玩耍,倒是github上确实已经有了一些不错的angular2-starter。

 

1. 安装必要的node环境与npm

Angular2 + Webpack项目搭建Demo

当然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:

Angular2 + Webpack项目搭建DemoAngular2 + Webpack项目搭建Demo
 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

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。