前端知识点总结（#5 开发环境）

六、开发环境

1. git

1. git是最常用的代码版本管理工具
2. git常用命令

2. 调试工具

1. chrome调试工具

• Elements
• Console
• debugger
• Network
• Application：可以看到storage

3. 抓包

1. 抓包

• 移动端H5页，查看网络请求，需要用工具抓包
• windows一般用fiddler
• Mac OS一般用charles

2. 如何抓包

• 手机和电脑连同一个局域网
• 将手机代理到电脑上
• 手机浏览网页，即可抓包
• 查看网络请求
• 网址代理
• https

4. webpack和babel

1. 为什么要用webpack和babel？

• ES6模块化，浏览器暂不支持
• ES6语法，浏览器并不完全支持
• 压缩代码，整合代码，以让网页加载更快

2. webpack和babel的关系

• 本身并没有什么关系
• babel可以给webpack提供一些插件，经常一起使用

3. webpack如何初始化（搭建）？

• npm install webpack webpack-cli -D
• 新建webpack.config.js配置文件

const path = require('path')

module.exports = {
    mode: 'development', // 如果改成'production'就会被压缩
    entry: path.join(__dirname, 'src', 'index.js')
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'),
            filename: 'index.html'
        })
    ],
    devServer: {
        port: 3000,
        contentBase: path.join(__dirname, 'dist')
    }
}

{
  "scripts": {
    "build": "webpack --config webpack.config.js" //--config...可以不写
    "dev": "webpack-dev-server"
  }
}

• 安装能解析html的插件：npm install html-webpack-plugin -D
• 安装能启动服务的插件：npm install webpack-dev-server -D html-webpack-plugin

4. Babel将ES6编译成ES5

• 安装Babel：npm install @babel/core @babel/preset-env babel-loader -D
• 新建.babelrc配置文件

{
    "presets": ["@babel/preset-env"]
}

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /.js$/,
                loader: ['babel-loader'],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    }
}

5. 怎么配置生产环境的打包？（压缩空间）

const path = require('path')

module.exports = {
    mode: 'production', // 注意是'production'
    entry: path.join(__dirname, 'src', 'index.js')
    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'
        })
    ]
}

{
  "scripts": {
    "build": "webpack --config webpack.prod.js" //--config...可以不写
    "dev": "webpack-dev-server"
  }
}

5. linux常用命令

1. 背景

• 公司的线上机器一般都是Linux（参考阿里云）
• 测试机也需要保持一直，用Linux
• 测试机或者线上机出了问题，本地又不能复现，需要去排查

2. 常用命令

• ls：查看多个文件（平铺的）
• ls -a：查看所有文件（all）
• ll：查看文件列表（列表）
• clear：清屏
• mkdir abc：创建新的文件夹abc
• rm -rf abc：删除文件夹abc（-rf表示递归删除）
• cd dist：进入dist目录
• mv index.html index1.html：修改文件名index.html为index1.html
• mv bundle.747.js ../bundle.747.js 移动bundle.747.js文件到上级目录
• rm a1.js：永久删除a1.js文件
• vi d.js：进入查看文件d.js
• vim d.js：查看（如果没有的话会直接新建d.js文件）文件
• cat package.json：打印package.json的所有内容
• head package.json：打印package.json的头部
• tail package.json：打印package.json的尾部
• grep "babel" package.json：在package.json中查找“babel”相关的
• vimtutor：vim教程