開(kāi)發(fā)環(huán)境

• Git
• 調(diào)試工具
• 抓包
• webpack label
• linux常用命令

• 面試官想通過(guò)開(kāi)發(fā)環(huán)境了解候選人的實(shí)際工作情況
• 開(kāi)發(fā)環(huán)境的工具，能體現(xiàn)工作產(chǎn)出的效率
• 會(huì)以聊天形式為主，不會(huì)問(wèn)具體的問(wèn)題

Git

• 最常用的代碼版本管理工具
• 大型項(xiàng)目需要多人協(xié)作開(kāi)發(fā)，必須使用git
• 如果你不知道或之前不用git，不會(huì)通過(guò)面試
• Mac OS自帶git命令，windows可去官網(wǎng)下載安裝
• git服務(wù)端常見(jiàn)的有g(shù)ithub coding.net等
• 大公司會(huì)搭建自己的內(nèi)網(wǎng)git服務(wù)

// 常用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

調(diào)試工具

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

Elements Console debugger Network Application

抓包

• 移動(dòng)端h5頁(yè)，查看網(wǎng)絡(luò)請(qǐng)求，需要用工具抓包
• windows一般用fiddler
• Mac OS一般用charles
• 手機(jī)和電腦連在同一個(gè)局域網(wǎng)
• 將手機(jī)代理到電腦上
• 手機(jī)瀏覽網(wǎng)頁(yè)，即可抓包
• 查看網(wǎng)絡(luò)請(qǐng)求
• 網(wǎng)址代理
• https
  
  
  
  

webpack label

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

//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 ，默認(rèn)為后者// production 會(huì)默認(rèn)壓縮代碼并進(jìn)行其他優(yōu)化（如 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, // 自動(dòng)打開(kāi)瀏覽器} } //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可以讓網(wǎng)頁(yè)加載更快，具體在性能優(yōu)化章節(jié)那邊會(huì)講到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常用命令

• 公司的線上機(jī)器一般都是linux（參考阿里云）
• 測(cè)試機(jī)也需要保持一致，用linux
• 測(cè)試機(jī)或者線上機(jī)出了問(wèn)題，本地又不能復(fù)現(xiàn)，需要去排查

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進(jìn)入編輯模式，esc退出編輯模式，:w保存，:q退出，:q!強(qiáng)制退出 vim d.js clear cat package.json head package.json tail package.json grep “babel” package.json vimtutor 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。