前端开发环境（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;
})

更多require.js知识

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基本命令：

秒客网

前端开发环境（2017）

相关文章