前端开发环境（2017）
关于开发环境
1、面试官想通过开发环境了解面试者的经验；
2、开发环境，最能体现工作产出的效率；
3、会以聊天的形式为主，而不是出具体的问题。
开发环境的内容包含
1、IDE（写代码的效率）；
2、git（代码版本管理，多人写作开发）；
3、JavaScript模块化；
4、打包工具（webpack）；
5、上线回滚的流程。
IDE介绍
1、webstorm；
2、sublime；
3、vscode；
4、atom。
（以上编辑器的插件非常重要！）
Git介绍
前言：正式项目都需要代码版本管理；大型项目都需要多人写作开发；Git和linux都是同一个作者。
常用的Git命令：
1、git add .；
2、git checkout xxx；
3、git commit -m “xxx”；
4、git push origin master；
5、git pull origin master；
6、git branch；
7、git checkout -b xxx / git checkout xxx；
8、git merge xxx；
更多
模块化介绍
1、不使用模块化的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/util.js" ></script>
<script type="text/javascript" src="js/a-util.js" ></script>
<script type="text/javascript" src="js/a.js" ></script>
</head>
<body>
<!--1、以上JavaScript代码中的函数必须是全局变量，才能暴露给使用方，全局变量的污染-->
<!--2、a.js知道要引用a-util.js，但是不知道还需要依赖于util.js-->
</body>
</html>
//util.js
function getFormatDate(date,type){
//type === 1 返回2017-11-08
//type === 2 返回2017年11月8日
}
//a-util.js
function aGetFormatDate(date){
return getFormatDate(date,2);
}
//a.js
var dt = new Date();
console.log(aGetFormatDate(dt));
2、使用模块化（我们可以更方便地使用别人的代码，想要什么功能，就加载什么模块。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/a.js" ></script>
</head>
<body>
<!--直接引用a.js，其他的根据依赖关系自动引用那两个函数，没必要做成全局变量，不会带来污染和覆盖-->
</body>
</html>
//util.js
export{
function getFormatDate(date,type){
//type === 1 返回2017-11-08
//type === 2 返回2017年11月8日
}
}
//a-util.js
var getFormatDate = require('util.js');
export{
aGetFormatDate:function(date){
return getFormatDate(date,2);
}
}
//a.js
var aGetFormatDate = require('a-util.js');
var dt = new Date();
console.log(aGetFormatDate(dt));
3、AMD
全称是Asynchronous Module Definition，即异步模块加载机制。作为一个规范，只需定义其语法API，而不关心其实现，AMD规范简单到只有一个API，即define函数：
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中：
module-name: 模块标识，可以省略；
array-of-dependencies: 所依赖的模块，可以省略；
module-factory-or-object: 模块的实现，或者一个JavaScript对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>AMD test</p>
<script type="text/javascript" src="js/require.js" data-main = "./main.js"></script>
</body>
</html>
//main.js(和html同个文件夹)
require(['./js/a.js'],function(a){
var date = new Date();
a.printDate(date);
})
//a.js
define(['./a-util.js'],function(aUtil){
var a = {
printDate:function(date){
console.log(aUtil.aGetFormatDate(date));
}
}
return a;
})
//a-util.js
define(['./util.js'],function(util){
var aUtil = {
aGetFormatDate:function(date){
return util.getFormatDate(date,2);
}
}
return aUtil;
})
//util.js
define(function(){
var util = {
getFormatDate:function(date,type){
if(type === 1){
return "2017-11-09";
}else{
return "2017年11月9日";
}
}
}
return util;
})
4、 CommonJS
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。
node.js模块化系统是参照CommonJS规范实现的，现在被大量用于前端，原因是：前端开发依赖的插件和库，都可以从npm中获取；构建工具的高度自动化，使得使用npm的成本非常低。
CommonJS不会异步加载JS，而是同步一次性加载出来。
5、AMD和CmmonJS的使用场景
需要异步加载JS，使用AMD；
使用了npm之后建议使用CommonJS。
6、其他
安装本地服务器：
打开cmd=>cd 目录=>npm install http-server -g=>http-server -p 端口号
访问：
http://localhost:端口号/index.html
webpack介绍
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
使用步骤：
1、cd 项目地址
2、初始化：npm init
3、安装webpack：npm install webpack --save-dev
（卸载命令：npm uninstall 名字 --save）
4、安装库（jQuery）：npm install jquery --save-dev（-dev可以选择不写）
5、配置文件：
//webpack.config.js
//获得node.js中一个path对象 var path =require('path'); //获得安装好的webpack对象 var webpack = require('webpack'); module.exports = { //寻找src目录 context:path.resolve(__dirname,'./src'), //入口文件 entry:{ app:'./app.js'; }, output:{ path:path.resolve(__dirname,'./dist'), filename:'bundle.js' } }
6、执行命令：webpack
7、使用jQuery：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>test</div>
<div id="root"></div>
<script type="text/javascript" src="dist/bundle.js" ></script>
</body>
</html>
//app.js
//得到jQuery对象
var $ = require('jquery')
var $root = $('#root')
$root.html('<p>这是jQuery插入的文字</p>')
8、压缩代码：
//获得node.js中一个path对象 var path =require('path'); //获得安装好的webpack对象 var webpack = require('webpack'); module.exports = { //寻找src目录 context:path.resolve(__dirname,'./src'), //入口文件 entry:{ app:'./app.js' }, output:{ path:path.resolve(__dirname,'./dist'), filename:'bundle.js' }, plugins:[ new webpack.optimize.UglifyJsPlugin() ] }
上线和回滚
上线和回滚的基本流程要点：
1、将测试完成的代码提交到git版本库的master分支；
2、将当前服务器的代码全部打包并记录版本号，备份；
3、将master分支的代码提交覆盖到线上服务器，生成新版本号。
linux基本命令：
