生活随笔
收集整理的這篇文章主要介紹了
(十一)开发环境【不会这些,你就会被认定是菜鸟小白,没做过项目】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
開發環境
- Git
- 調試工具
- 抓包
- webpack label
- linux常用命令
- 面試官想通過開發環境了解候選人的實際工作情況
- 開發環境的工具,能體現工作產出的效率
- 會以聊天形式為主,不會問具體的問題
Git
- 最常用的代碼版本管理工具
- 大型項目需要多人協作開發,必須使用git
- 如果你不知道或之前不用git,不會通過面試
- Mac OS自帶git命令,windows可去官網下載安裝
- git服務端常見的有github coding.net等
- 大公司會搭建自己的內網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語法,瀏覽器并不完全支持
- 壓縮代碼,整合代碼,以讓網頁加載更快
{"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"}
}
{"presets": ["@babel/preset-env"],"plugins": []
}
const path
= require('path')
const HtmlWebpackPlugin
= require('html-webpack-plugin')module
.exports
= {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, }
}
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',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
vim d
.js
clear
cat
package.json
head
package.json
tail
package.json
grep “babel”
package.json
vimtutor
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的(十一)开发环境【不会这些,你就会被认定是菜鸟小白,没做过项目】的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。