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

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

posted on 2018-04-22 22:43  Failbs  阅读(181)  评论(0)  编辑  收藏  举报