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

（十一）开发环境【不会这些，你就会被认定是菜鸟小白，没做过项目】相关推荐

【游戏开发】基于VS2017的OpenGL开发环境搭建
一.简介最近,马三买了两本有关于"计算机图形学"的书籍,准备在工作之余鼓捣鼓捣图形学和OpenGL编程,提升自己的价值(奔着学完能涨一波工资去的).俗话说得好,"工欲善 ...
python环境准备_python开发环境准备
python 以版本众多,包之间依赖复杂而著称,所以一个趁手的开发环境还是很有必要的. 我的建议是用Anaconda做环境隔离.包管理,PyCharm做项目开发,jupyter做笔记,ipython和 ...
mybatis注解开发_快速搭建MyBatis开发环境（配置版+注解版）
下面我们搭建一下MyBaits的开发环境,也就是一个用MyBaits框架访问数据库的例子. 1.项目结构如下这里搭建的是一个maven项目. 2.引入依赖pom.xml 4.0.0com.suibi ...
intelRealsense D435 python开发环境搭建
首先说一下电脑的配置系统:win7 语言:python2.7 安装应该是从D系列开始官方的开发文档都整合在了github,事实上,官方也有python环境安装说明,只是全部是英文,英语好的同学可以 ...
入职开发很少写代码_如何简化开发人员入职：将开发环境作为代码
入职开发很少写代码 Imagine that only a decade ago system administrators deployed, configured, and maintained ...
2019-安卓开发环境搭建-经验分享-Eclipse（主要内容）+Android Studio
2019-安卓开发环境搭建-经验分享-Eclipse(主要内容)+Android Studio 0. 引言 1. 常见问题 2. 配置安卓开发环境 2.1 准备 JDK 环境 2.1.1 下载 JDK ...
跨平台AR增强现实开发（一）（AR开发环境的搭建）
简介: AR,英文单词为AugmentedReality,增强现实:该技术在几十年前就被提出来了:但一直局限于设备,硬件的限制,无法在生活中应用开来,随着这几年移动互联网的快速发展以及市场的需求变更速 ...
Lightly 自动构建开发环境
对一般的编辑器或集成开发环境而言,由于系统不同以及依赖出现差异,许多人往往面临开发好的项目在部署或协作时,面临功能失常的情况. 通常,构建开发环境耗时长达数小时.以团队协作为例,项目组加入新成员时,往 ...
使用30元开发板UNO D1 R32构筑物联网开发环境
本文介绍使用UNO D1 R32(ESP32)开发板构建嵌入式开发环境的方法. ESP32是啥? 用厂家的话来讲,ESP32 采用 40 nm 工艺制成,具有最佳的功耗性能.射频性能.稳定性.通用性和 ...

（十一）开发环境【不会这些，你就会被认定是菜鸟小白，没做过项目】

开发环境

Git

调试工具

抓包

webpack label

linux常用命令

（十一）开发环境【不会这些，你就会被认定是菜鸟小白，没做过项目】相关推荐

最新文章

热门文章