工程師的開發環境決定其開發效率,常用的開發環境配置也是面試考查點之一。
## 知識點梳理
* IDE
* Git
* Linux 基礎命令
* 前端構建工具
* 調試方法
本小節會重點介紹 Git 的基本用法、代碼部署和開發中常用的 Linux 命令,然后以 webpack 為例介紹下前端構建工具,最后介紹怎么抓包解決線上問題。這些都是日常開發和面試中常用到的知識。
* * *
## IDE
> 題目:你平時都使用什么 IDE 編程?有何提高效率的方法?
前端最常用的 IDE 有 [Webstorm](https://www.jetbrains.com/webstorm/)、[Sublime](https://www.sublimetext.com/)、[Atom](https://atom.io/) 和 [VSCode](https://code.visualstudio.com/),我們可以分別去它們的官網看一下。
Webstorm 是最強大的編輯器,因為它擁有各種強大的插件和功能,但是我沒有用過,因為它收費。不是我舍不得花錢,而是因為我覺得免費的 Sublime 已經夠我用了。跟面試官聊到 Webstorm 的時候,沒用過沒事兒,但一定要知道它:第一,強大;第二,收費。
Sublime 是我日常用的編輯器,第一它免費,第二它輕量、高效,第三它插件非常多。用 Sublime 一定要安裝各種插件配合使用,可以去網上搜一下“sublime”常用插件的安裝以及用法,還有它的各種快捷鍵,并且親自使用它。這里就不一一演示了,網上的教程也很傻瓜式。
Atom 是 GitHub 出品的編輯器,跟 Sublime 差不多,免費并且插件豐富,而且跟 Sublime 相比風格上還有些小清新。但是我用過幾次就不用了,因此它打開的時候會比較慢,卡一下才打開。當然總體來說也是很好用的,只是個人習慣問題。
VSCode 是微軟出品的輕量級(相對于 Visual Studio 來說)編輯器,微軟做 IDE 那是出了名的好,出了名的大而全,因此 VSCode 也有上述 Sublime 和 Atom 的各種優點,但是我也是因為個人習慣問題(本人不愿意嘗試沒有新意的新東西),用過幾次就不用了。
總結一下:
* 如果你要走大牛、大咖、逼格的路線,就用 Webstorm
* 如果你走普通、屌絲、低調路線,就用 Sublime
* 如果你走小清新、個性路線,就用 VSCode 或者 Atom
* 如果你面試,最好有一個用的熟悉,其他都會一點
最后注意:千萬不要說你使用 Dreamweaver 或者 notepad++ 寫前端代碼,會被人鄙視的。如果你不做 .NET 也不要用 Visual Studio ,不做 Java 也不要用 Eclipse。
* * *
## Git
你此前做過的項目一定要用過 Git,而且必須是命令行,如果沒用過,你自己也得惡補一下。對 Git 的基本應用比較熟悉的同學,可以跳過這一部分了。macOS 自帶 Git,Windows 需要安裝 Git 客戶端,去 [Git 官網](https://git-scm.com/download/win) 下載即可。
國內比較好的 Git 服務商有 coding.net,國外有大名鼎鼎的 GitHub,但是有時會有網絡問題,因此建議大家注冊一個 coding.net 賬號然后創建項目,來練練手。
> 題目:常用的 Git 命令有哪些?如何使用 Git 多人協作開發?
### 常用的 Git 命令
首先,通過`git clone <項目遠程地址>`下載下來最新的代碼,例如`git clone git@git.coding.net:username/project-name.git`,默認會下載`master`分支。
然后修改代碼,修改過程中可以通過`git status`看到自己的修改情況,通過`git diff <文件名>`可查閱單個文件的差異。
最后,將修改的內容提交到遠程服務器,做如下操作
```
git add .
git commit -m "xxx"
git push origin master
```
如果別人也提交了代碼,你想同步別人提交的內容,執行`git pull origin master`即可。
### 如何多人協作開發
多人協作開發,就不能使用`master`分支了,而是要每個開發者單獨拉一個分支,使用`git checkout -b <branchname>`,運行`git branch`可以看到本地所有的分支名稱。
自己的分支,如果想同步`master`分支的內容,可運行`git merge master`。切換分支可使用`git checkout <branchname>`。
在自己的分支上修改了內容,可以將自己的分支提交到遠程服務器
```
git add .
git commit -m "xxx"
git push origin <branchname>
```
最后,待代碼測試沒問題,再將自己分支的內容合并到`master`分支,然后提交到遠程服務器。
```
git checkout master
git merge <branchname>
git push origin master
```
### 關于 SVN
關于 SVN 筆者的態度和針對 IE 低版本瀏覽器的態度一樣,你只需要查詢資料簡單了解一下。面試的時候可能會問到,但你只要熟悉了 Git 的操作,面試官不會因為你不熟悉 SVN 而難為你。前提是你要知道一點 SVN 的基本命令,自己上網一查就行。
不過 SVN 和 Git 的區別你得了解。SVN 是每一步操作都離不開服務器,創建分支、提交代碼都需要連接服務器。而 Git 就不一樣了,你可以在本地創建分支、提交代碼,最后再一起 push 到服務器上。因此,Git 擁有 SVN 的所有功能,但是卻比 SVN 強大得多。(Git 是 Linux 的創始人 Linus 發明的東西,因此也倍得推崇。)
* * *
## Linux 基礎命令
目前互聯網公司的線上服務器都使用 Linux 系統,測試環境為了保證和線上一致,肯定也是使用 Linux 系統,而且都是命令行的,沒有桌面,不能用鼠標操作。因此,掌握基礎的 Linux 命令是非常必要的。下面總結一些最常用的 Linux 命令,建議大家在真實的 Linux 系統下親自試一下。
關于如何得到 Linux 系統,有兩種選擇:第一,在自己電腦的虛擬機中安裝一個 Linux 系統,例如 Ubuntu/CentOS 等,下載這些都不用花錢;第二,花錢去阿里云等云服務商租一個最便宜的 Linux 虛擬機。推薦第二種。一般正式入職之后,公司都會給你分配開發機或者測試機,給你賬號和密碼,你自己可以遠程登錄。
> 題目:常見 linux 命令有哪些?
### 登錄
入職之后,一般會有現有的用戶名和密碼給你,你拿來之后直接登錄就行。運行 `ssh name@server` 然后輸入密碼即可登錄。
### 目錄操作
* 創建目錄 `mkdir <目錄名稱>`
* 刪除目錄 `rm <目錄名稱>`
* 定位目錄 `cd <目錄名稱>`
* 查看目錄文件 `ls` `ll`
* 修改目錄名 `mv <目錄名稱> <新目錄名稱>`
* 拷貝目錄 `cp <目錄名稱> <新目錄名稱>`
### 文件操作
* 創建文件 `touch <文件名稱>` `vi <文件名稱>`
* 刪除文件 `rm <文件名稱>`
* 修改文件名 `mv <文件名稱> <新文件名稱>`
* 拷貝文件 `cp <文件名稱> <新文件名稱>`
### 文件內容操作
* 查看文件 `cat <文件名稱>` `head <文件名稱>` `tail <文件名稱>`
* 編輯文件內容 `vi <文件名稱>`
* 查找文件內容 `grep '關鍵字' <文件名稱>`
* * *
## 前端構建工具
構建工具是前端工程化中不可缺少的一環,非常重要,而在面試中卻有其特殊性 —— **面試官會通過詢問構建工具的作用、目的來詢問你對構建工具的了解,只要這些你都知道,不會再追問細節**。因為,在實際工作中,真正能讓你編寫構建工具配置文件的機會非常少,一個項目就配置一次,后面就很少改動了。而且,如果是大眾使用的框架(如 React、Vue 等),還會直接有現成的腳手架工具,一鍵創建開發環境,不用手動配置。
> 題目:前端為何要使用構建工具?它解決了什么問題?
### 何為構建工具
“構建”也可理解為“編譯”,就是將開發環境的代碼轉換成運行環境代碼的過程。**開發環境的代碼是為了更好地閱讀,而運行環境的代碼是為了更快地執行,兩者目的不一樣,因此代碼形式也不一樣**。例如,開發環境寫的 JS 代碼,要通過混淆壓縮之后才能放在線上運行,因為這樣代碼體積更小,而且對代碼執行不會有任何影響。總結一下需要構建工具處理的幾種情況:
* **處理模塊化**:CSS 和 JS 的模塊化語法,目前都無法被瀏覽器兼容。因此,開發環境可以使用既定的模塊化語法,但是需要構建工具將模塊化語法編譯為瀏覽器可識別形式。例如,使用 webpack、Rollup 等處理 JS 模塊化。
* **編譯語法**:編寫 CSS 時使用 Less、Sass,編寫 JS 時使用 ES6、TypeScript 等。這些標準目前也都無法被瀏覽器兼容,因此需要構建工具編譯,例如使用 Babel 編譯 ES6 語法。
* **代碼壓縮**:將 CSS、JS 代碼混淆壓縮,為了讓代碼體積更小,加載更快。
### 構建工具介紹
最早普及使用的構建工具是 [Grunt](http://www.gruntjs.net/) ,不久又被 [Gulp](https://www.gulpjs.com.cn/) 給追趕上。Gulp 因其簡單的配置以及高效的性能而被大家所接受,也是筆者個人比較推薦的構建工具之一。如果你做一些簡單的 JS 開發,可以考慮使用。
如果你的項目比較復雜,而且是多人開發,那么你就需要掌握目前構建工具屆的神器 —— webpack 。不過神器也有一個缺點,就是學習成本比較高,需要拿出專門的時間來專心學習,而不是三言兩語就能講完的。我們下面就演示一下 webpack 最簡單的使用,全面的學習還得靠大家去認真查閱相關文檔,或者參考專門講解 webpack 的教程。
### webpack 演示
接下來我們演示一下 webpack 處理模塊化和混淆壓縮代碼這兩個基本功能。
首先,你需要安裝 Node.js,沒有安裝的可以去 [Node.js 官網](http://nodejs.cn/download/) 下載并安裝。安裝完成后運行如下命令來驗證是否安裝成功。
```
node -v
npm -v
```
然后,新建一個目錄,進入該目錄,運行`npm init`,按照提示輸入名稱、版本、描述等信息。完成之后,該目錄下出現了一個`package.json`文件,是一個 JSON 文件。
接下來,安裝 wepback,運行`npm i --save-dev webpack`,網絡原因需要耐心等待幾分鐘。
接下來,編寫源代碼,在該目錄下創建`src`文件夾,并在其中創建`app.js`和`dt.js`兩個文件,文件內容分別是:
```
// dt.js 內容
module.exports = {
getDateNow: function () {
return Date.now()
}
}
// app.js 內容
var dt = require('./dt.js')
alert(dt.getDateNow())
```
然后,再返回上一層目錄,新建`index.html`文件(該文件和`src`屬于同一層級),內容是
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div>test</div>
<script src='./dist/bundle.js'></script>
</body>
</html>
```
然后,編寫 webpack 配置文件,新建`webpack.config.js`,內容是
```
const path = require('path');
const webpack = require('webpack');
module.exports = {
context: path.resolve(__dirname, './src'),
entry: {
app: './app.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
}
}),
]
};
```
總結一下,目前項目的文件目錄是:
```
src
+-- app.js
+-- dt.js
index.html
package.json
webpack.config.js
```
接下來,打開`package.json`,然后修改其中`scripts`的內容為:
```
"scripts": {
"start": "webpack"
}
```
在命令行中運行`npm start`,即可看到編譯的結果,最后在瀏覽器中打開`index.html`,即可彈出`Date.now()`的值。
### 總結
最后再次強調,**深刻理解構建工具存在的價值,比你多會一些配置代碼更加有意義,特別是對于應對面試來說**。
* * *
## 調試方法
調試方法這塊被考查最多的就是如何進行抓包。
> 題目:如何抓取數據?如何使用工具來配置代理?
PC 端的網頁,我們可以通過 Chrome、Firefox 等瀏覽器自帶的開發者工具來查看網頁的所有網絡請求,以幫助排查 bug。這種監聽、查看網絡請求的操作稱為**抓包**。
針對移動端的抓包工具,Mac 系統下推薦使用 Charles 這個工具,首先 [下載](https://www.charlesproxy.com/download/) 并安裝,打開。Windows 系統推薦使用 [Fiddler](http://rj.baidu.com/soft/detail/10963.html),下載安裝打開。兩者使用基本一致,下面以 Charles 為例介紹。
接下來,將安裝好 Charles 的電腦和要抓包的手機,連接到同一個網絡(一般為公司統一提供的內網,由專業網絡工程師搭建),保證 IP 段相同。然后,將手機設置網絡代理(每種不同手機如何設置網絡代理,網上都有傻瓜式教程),代理的 IP 為電腦的 IP,代理的端口為`8888`。然后,Charles 可能會有一個彈框提示是否允許連接代理,這里選擇“允許”即可。這樣,使用手機端訪問的網頁或者聯網的請求,Charles 就能監聽到了。
在開發過程中,經常用到抓包工具來做代理,將線上的地址代理到測試環境,Charles 和 Fiddler 都可實現這個功能。以 Charles 為例,點擊菜單欄中 Tools 菜單,然后二級菜單中點擊 Map Remote,會彈出配置框。首先,選中 Enable Map Remote 復選框,然后點擊 Add 按鈕,添加一個代理項。例如,如果要將線上的`https://www.aaa.com/api/getuser?name=xxx`這個地址代理到測試地址`http://168.1.1.100:8080/api/getuser?name=xxx`,配置如下圖

* * *
## 小結
本小節總結了前端開發環境常考查的知識,這些知識也是前端程序員必須掌握的,否則會影響開發效率。