當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端开发环境（2017）

發布時間：2024/4/17 HTML 32 豆豆

生活随笔收集整理的這篇文章主要介紹了前端开发环境（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></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></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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

环境