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

• 面试官想通过开发环境了解候选人的实际工作情况
• 开发环境的工具，能体现工作产出的效率
• 会以聊天形式为主，不会问具体的问题

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