個人第一個Angular2應用

1須要具有的基本前端基礎：HTML、CSS、JavaScript。爲了實現對項目包的管理，推薦使用npm

　　NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題；官網先下載node.js並安裝

2.clone快速新建Angular項目的倉庫到本地文件夾my-angular2-app。

git clone git@github.com:len007/my-angular2-app.git my-angular2-app

3.建立package.json文件，用於管理本地安裝的npm模塊(包)。

 

 1 {
 2   "name": "angular-quickstart",
 3   "version": "1.0.0",
 4   "description": "Len'First App",
 5   "scripts": {
 6     "prebuild": "npm run clean",    
 7     "build": "webpack --progress --watch",
 8     "start": "lite-server -c=bs-config.json",
 9     "serve": "webpack-dev-server -d",
10     "lint": "tslint ./src/**/*.ts -t verbose",
11     "clean": "rimraf build"
12   },
13   "keywords": [],
14   "homePage": "",
15   "config": { "port" : "8080" },
16   "author": "Len",
17   "license": "MIT",
18   "dependencies": {
19     "@angular/common": "~4.3.4",
20     "@angular/compiler": "~4.3.4",
21     "@angular/core": "~4.3.4",
22     "@angular/forms": "~4.3.4",
23     "@angular/http": "~4.3.4",
24     "@angular/platform-browser": "~4.3.4",
25     "@angular/platform-browser-dynamic": "~4.3.4",
26     "@angular/router": "~4.3.4",
27     "angular-in-memory-web-api": "~0.3.0",
28     "core-js": "^2.4.1",
29     "fork-ts-checker-webpack-plugin": "^0.4.1",
30     "rxjs": "5.0.1",
31     "systemjs": "0.19.40",
32     "zone.js": "^0.8.4"
33   },
34   "devDependencies": {
35     "@types/jasmine": "2.5.36",
36     "@types/node": "^6.0.46",
37     "canonical-path": "0.0.2",
38     "clean-webpack-plugin": "^0.1.19",
39     "concurrently": "^3.2.0",
40     "copy-webpack-plugin": "^4.5.1",
41     "css-loader": "^0.28.11",
42     "extract-text-webpack-plugin": "^3.0.2",
43     "file-loader": "^1.1.11",
44     "html-webpack-plugin": "^3.2.0",
45     "install": "^0.11.0",
46     "jasmine-core": "~2.4.1",
47     "karma": "^1.3.0",
48     "karma-chrome-launcher": "^2.0.0",
49     "karma-cli": "^1.0.1",
50     "karma-jasmine": "^1.0.2",
51     "karma-jasmine-html-reporter": "^0.2.2",
52     "lite-server": "^2.2.2",
53     "lodash": "^4.16.4",
54     "protractor": "~4.0.14",
55     "rimraf": "^2.5.4",
56     "style-loader": "^0.21.0",
57     "ts-loader": "^4.2.0",
58     "tsconfig-paths-webpack-plugin": "^3.0.4",
59     "tslint": "^3.15.1",
60     "typescript": "latest",
61     "url-loader": "^1.0.1",
62     "webpack": "^4.6.0",
63     "webpack-cli": "^2.0.15",
64     "webpack-dev-server": "^3.1.3"
65   },
66   "repository": "git@github.com:len007/my-angular2-app.git"
67 }

 

其中：

name： 項目名稱
version： 項目版本號
description： 項目描述
keywords：{Array}關鍵字，便於用戶搜索到咱們的項目
homepage：項目URL主頁
bugs：項目問題反饋的URL或Email配置，如：
    {
        "url" : "https://github.com/owner/project/issues", 
        "email": "project@hostname.com"
    }
license：項目許可證，讓使用者知道是如何被容許使用此項目。
author,contributors：做者和貢獻者
scripts：聲明一系列npm腳本指令
    prepublish: 在包發佈以前運行，也會在npm install安裝到本地時運行
    publish,postpublish: 包被髮布以後運行
    preinstall: 包被安裝前運行
    install,postinstall: 包被安裝後運行
    preuninstall,uninstall: 包被卸載前運行
    postuninstall: 包被卸載後運行
    preversion: bump包版本前運行
    postversion: bump包版本後運行
    pretest,test,posttest: 經過npm test命令運行
    prestop,stop,poststop: 經過npm stop命令運行
    prestart,start,poststart: 經過npm start命令運行
    prerestart,restart,postrestart: 經過npm restart運行
config： { "port" : "8080" }，配置項目中須要的配置參數
dependencies：項目在生產環境中依賴的包
devDependencied：項目在開發和測試環境中依賴的包

 

4.Install所需的包

npm install

5.建立webpack.json文件。

 1 const path = require('path');
 2 const webpack = require('webpack');
 3 const HtmlWebpackPlugin = require('html-webpack-plugin');
 4 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 5 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 6 const CopyWebpackPlugin = require('copy-webpack-plugin');
 7 
 8 module.exports = {
 9     mode: "development",
10     devtool: "inline-source-map",
11     entry: "./src/main.ts",
12     output: {
13         path: path.resolve(__dirname ,'build'),
14         filename: "[name].bundle.js"
15     },
16     devServer: {
17         contentBase: path.join(__dirname, ""),
18         compress: true,
19         stats: "errors-only",
20         openPage: "",
21         port:9000,
22         open:true
23       },
24     resolve: {
25       extensions: [".ts", ".tsx", ".js"],
26     },
27     module: {
28       rules: [
29         { 
30             test: /\.tsx?$/, 
31             use:["ts-loader"],
32             exclude: [
33                 path.resolve(__dirname ,'node_modules')
34             ]
35       
36         },
37         {
38             test: /(\.jsx|\.js)$/,
39             use: {
40                 loader: "babel-loader"
41             },
42             exclude: /node_modules/
43         },{
44             test: /\.css$/,
45             use: ExtractTextPlugin.extract({
46                 fallback: "style-loader",
47                 use: [{
48                     loader: "css-loader",
49                     options: {
50                         modules: true,
51                         localIdentName: '[name]__[local]--[hash:base64:5]'
52                     }
53                 }, {
54                     loader: "postcss-loader"
55                 }],
56             })
57         }
58 
59       ]
60     }
61   };

 

5.webpack打包編譯，由配置可看出編譯以前會先刪除build文件夾。

npm run build

6.這裏咱們能夠使用兩種方式啓動本地瀏覽器來顯示我們的應用

npm start( lite-server -c=bs-config.json )

或

npm run serve( webpack-dev-server -d )

webpack-dev-server是與webpack配套使用的命令。

 至此，咱們的簡單應用就成型了!