開發環境

• Git
• 調試工具
• 抓包
• webpack label
• linux常用命令

• 面試官想通過開發環境了解候選人的實際工作情況
• 開發環境的工具，能體現工作產出的效率
• 會以聊天形式為主，不會問具體的問題

Git

• 最常用的代碼版本管理工具
• 大型項目需要多人協作開發，必須使用git
• 如果你不知道或之前不用git，不會通過面試
• Mac OS自帶git命令，windows可去官網下載安裝
• git服務端常見的有github coding.net等
• 大公司會搭建自己的內網git服務

// 常用git命令 git add . git checkout xxx git commit -m "xxx" git push origin master git pull origin master git branch git checkout -b xxx / git checkout xxx git merge xxx git stash git stash pop

調試工具

• 一般不會面試時考察
• 但這是前端工程師必備的技能（不算知識）

Elements Console debugger Network Application

抓包

• 移動端h5頁，查看網絡請求，需要用工具抓包
• windows一般用fiddler
• Mac OS一般用charles
• 手機和電腦連在同一個局域網
• 將手機代理到電腦上
• 手機瀏覽網頁，即可抓包
• 查看網絡請求
• 網址代理
• https
  
  
  
  

webpack label

• ES6模塊化，瀏覽器暫不支持
• ES6語法，瀏覽器并不完全支持
• 壓縮代碼，整合代碼，以讓網頁加載更快

//package.json {"name": "webpack-demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config webpack.prod.js","dev": "webpack-dev-server"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.6.2","@babel/preset-env": "^7.6.2","babel-loader": "^8.0.6","html-webpack-plugin": "^3.2.0","webpack": "^4.41.0","webpack-cli": "^3.3.9","webpack-dev-server": "^3.8.1"} } //.babelrc {"presets": ["@babel/preset-env"],"plugins": [] } //webpack.config.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// mode 可選 development 或 production ，默認為后者// production 會默認壓縮代碼并進行其他優化（如 tree shaking）mode: 'development',entry: path.join(__dirname, 'src', 'index'),output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},module: {rules: [{test: /\.js$/,loader: ['babel-loader'],include: path.join(__dirname, 'src'),exclude: /node_modules/},]},plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'src', 'index.html'),filename: 'index.html'})],devServer: {port: 3000,contentBase: path.join(__dirname, 'dist'), // 根目錄open: true, // 自動打開瀏覽器} } //webpack.prod.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {mode: 'production',entry: path.join(__dirname, 'src', 'index'),output: {filename: 'bundle.[contenthash].js',//contenthash可以讓網頁加載更快，具體在性能優化章節那邊會講到path: path.join(__dirname, 'dist')},module: {rules: [{test: /\.js$/,loader: ['babel-loader'],include: path.join(__dirname, 'src'),exclude: /node_modules/},]},plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, 'src', 'index.html'),filename: 'index.html'})] }

linux常用命令

• 公司的線上機器一般都是linux（參考阿里云）
• 測試機也需要保持一致，用linux
• 測試機或者線上機出了問題，本地又不能復現，需要去排查

ssh work@ip地址 ls ls -a ll mkdir abc ll abc rm -rf abc cd dist mv index.html ../index1.html cp a.js a1.js rm a1.js touch d.js vi d.js//i進入編輯模式，esc退出編輯模式，:w保存，:q退出，:q!強制退出 vim d.js clear cat package.json head package.json tail package.json grep “babel” package.json vimtutor 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的（十一）开发环境【不会这些，你就会被认定是菜鸟小白，没做过项目】的全部內容，希望文章能夠幫你解決所遇到的問題。

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