前端开发环境（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基本命令：
?
轉載于:https://www.cnblogs.com/fengxiongZz/p/7808623.html
總結
以上是生活随笔為你收集整理的前端开发环境（2017）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Laravel框架发送邮件
- 下一篇： 前端切图注意项