前端开发扫盲（写给同事）
chapter1 概念入门
前端几个重要的概念
单页面应用:
单页面应用与传统java jsp等资源不同的点在于，单页面应用的资源对应只有一个html文件和一个js文件（大多是这样），需要访问不同链接的资源可以通过 “#” 这个浏览器锚点进行访问，针对“#”进行浏览器的路由功能
技术栈：
java程序员可能长时间没有接触过前端的技术，前端这几年来的技术变革很大，前两年我们还在写es5的脚本js代码，如今的es6与es5在语法上面有了很大的区别，但是java程序理解es6的语法应该不会太难。需要注意的是，es6的代码部分语法现在的浏览器还不能完全支持，需要通过工具把es6的代码再次编译成es5的代码才能正常运行在浏览器中，常用的编译工具链是webpack，babel详见http://webpack.github.io
环境搭建
环境安装： windows下建议直接下载最新稳定版本的msi安装包，一步到位，无需任何配置，mac下安装node建议先安装brew（不知道brew的搜索一下，先把brew安装好）brew install nodejs，linux用户可以直接去gituhb上下载源码编译安装。安装完node之后会有附带有npm程序，npm是前端的包管理软件，类似于java的maven和gradle，我们可以利用npm下载第三方库。
注意：linux和mac在安装完node之后需要解决权限问题，具体的解决方案在 这里
把权限解决了以后算是可以正式开始写代码了。
如何开始：
如何快速投入到生产中，通过以下的学习曲线可以快速的把学到的东西快速的投入到生产。
对于es6的学习，为了快速，并不建议一开始就去了解es6的整个语法糖以及技巧用法，当对于大多数代码，es6和java是一样的。可以先挑几章看着。
http://es6.ruanyifeng.com
阮一峰写的es6入门，推荐以下几个章节 1.let和const命令，2.Promise对象 3.Generator 函数的语法 4.Generator 函数的异步应用 5.async 函数 6.Class 的基本语法 7.Class 的继承 8.Decorator 9.Module 的语法
通篇阅读这几个章节，对es6的语法以及前端Promise（Generator 与 async也是Promise的一种扩展）的用有个大致的了解，接下来我们就可以创建以es6语法为基础的应用了
chapter 2 创建应用
package.json
package.json为前端工程主目录下的文件，用户管理包的依赖和前端工程的启动脚本，其他的功能我没用过，下面是一个ant工程的package.json文件的内容，可以参考一下。
{
"name": "ant-design-pro",
"version": "1.1.0",
"description": "An out-of-box UI solution for enterprise applications",
"private": true,
"scripts": {
"precommit": "npm run lint-staged",
"start": "cross-env DISABLE_ESLINT=true roadhog dev"
},
"dependencies": {
"url-polyfill": "^1.0.10"
},
"devDependencies": {
"stylelint": "^8.4.0",
"stylelint-config-standard": "^18.0.0"
},
"optionalDependencies": {
"nightmare": "^2.10.0"
},
"lint-staged": {
"**/*.{js,jsx}": "lint-staged:js",
"**/*.less": "stylelint --syntax less"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}
初始化前端工程会可以使用npm init命令，这条命令可以生成一个package.json文件，根据提示信息生成完package.json文件后，就只有一些简单的项目信息，如果需要安装第三方依赖库，可以使用如： npm install --save jshint，这条命令会在dependencies下插入一条记录，如上dependencies里面的内容所示。 --save的意思是代码项目的依赖，dependencies里面的内容会直接编译到最终代码中去， npm install --save-dev jshint 如果加上--save-dev， 那么会在devDependencies里面插入一条相关记录，devDependencies里面的依赖项不会编译到代码当中去。什么样的代码不需要编译到最终代码中去？一些本身最为编译代码的库，如webpack这样依赖库是无需编译到最终代码中去的。
代码打包
代码为什么需要打包？
前面也说了，es6的语法很多浏览器不支持，而且作为单页面应用，代码也应该打包。
用什么工具打包？
webpack。
webpack如何使用？
webpack使用首先需要安装， npm install -g webpack
安装完webpack后，需要在项目的主目录里创建webpack.config.js作为webpack打包的描述文件。
// 這邊使用 HtmlWebpackPlugin，將 bundle 好得