工程師的開發環境決定其開發效率，常用的開發環境配置也是面試考查點之一。 ## 知識點梳理 * 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`，配置如下圖  * * * ## 小結 本小節總結了前端開發環境常考查的知識，這些知識也是前端程序員必須掌握的，否則會影響開發效率。