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配套使用的命令。
至此，我们的简单应用就成型了!