我的第一个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模块(包)。

 

 {
   "name": "angular-quickstart",
   "version": "1.0.0",
   "description": "Len'First App",
   "scripts": {
     "prebuild": "npm run clean",
     "build": "webpack --progress --watch",
     "start": "lite-server -c=bs-config.json",
     "serve": "webpack-dev-server -d",
     "lint": "tslint ./src/**/*.ts -t verbose",
     "clean": "rimraf build"
   },
   "keywords": [],
   "homePage": "",
   "config": { "port" : "" },
   "author": "Len",
   "license": "MIT",
   "dependencies": {
     "@angular/common": "~4.3.4",
     "@angular/compiler": "~4.3.4",
     "@angular/core": "~4.3.4",
     "@angular/forms": "~4.3.4",
     "@angular/http": "~4.3.4",
     "@angular/platform-browser": "~4.3.4",
     "@angular/platform-browser-dynamic": "~4.3.4",
     "@angular/router": "~4.3.4",
     "angular-in-memory-web-api": "~0.3.0",
     "core-js": "^2.4.1",
     "fork-ts-checker-webpack-plugin": "^0.4.1",
     "rxjs": "5.0.1",
     "systemjs": "0.19.40",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "@types/jasmine": "2.5.36",
     "@types/node": "^6.0.46",
     "canonical-path": "0.0.2",
     "clean-webpack-plugin": "^0.1.19",
     "concurrently": "^3.2.0",
     "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.11",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
     "install": "^0.11.0",
     "jasmine-core": "~2.4.1",
     "karma": "^1.3.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-cli": "^1.0.1",
     "karma-jasmine": "^1.0.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "lite-server": "^2.2.2",
     "lodash": "^4.16.4",
     "protractor": "~4.0.14",
     "rimraf": "^2.5.4",
     "style-loader": "^0.21.0",
     "ts-loader": "^4.2.0",
     "tsconfig-paths-webpack-plugin": "^3.0.4",
     "tslint": "^3.15.1",
     "typescript": "latest",
     "url-loader": "^1.0.1",
     "webpack": "^4.6.0",
     "webpack-cli": "^2.0.15",
     "webpack-dev-server": "^3.1.3"
   },
   "repository": "git@github.com:len007/my-angular2-app.git"
 }

其中：

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文件。

 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');

 module.exports = {
     mode: "development",
     devtool: "inline-source-map",
     entry: "./src/main.ts",
     output: {
         path: path.resolve(__dirname ,'build'),
         filename: "[name].bundle.js"
     },
     devServer: {
         contentBase: path.join(__dirname, ""),
         compress: true,
         stats: "errors-only",
         openPage: "",
         port:9000,
         open:true
       },
     resolve: {
       extensions: [".ts", ".tsx", ".js"],
     },
     module: {
       rules: [
         {
             test: /\.tsx?$/,
             use:["ts-loader"],
             exclude: [
                 path.resolve(__dirname ,'node_modules')
             ]

         },
         {
             test: /(\.jsx|\.js)$/,
             use: {
                 loader: "babel-loader"
             },
             exclude: /node_modules/
         },{
             test: /\.css$/,
             use: ExtractTextPlugin.extract({
                 fallback: "style-loader",
                 use: [{
                     loader: "css-loader",
                     options: {
                         modules: true,
                         localIdentName: '[name]__[local]--[hash:base64:5]'
                     }
                 }, {
                     loader: "postcss-loader"
                 }],
             })
         }

       ]
     }
   };

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配套使用的命令。

至此，我们的简单应用就成型了!