五、前端开发环境及工具总结

知行合一也
85 阅读6分钟

1.git

    1. 最常用的代码版本管理工具
    2. 大型项目需要多人协作开发,必须熟用git
    3. Mac OS 自带git命令,windows可去官网下载安装
        https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git
    4.git服务端常见的有github,gitee,coding.net 等
        github较慢,可自行配置vpn
    5.一般公司会搭建自己的内网git服务
常用命令
    git clone 仓库地址   克隆仓库到本地
    git add .   提交代码值暂存区
    git commit -m "对本次代码改动的描述"
    git push origin master   本地代码推送至远程仓库
    git pull origin master   同步更新代码
    git checkout -b  分支名   新建分支
    git checkout 分支名   切换分支
    git merge  分支名  合并分支
    git branch  查看当前所有分支  === git branch --list
    git branch <分支名> 创建分支
    git branch -d <分支名> 删除分支
    git log 查看提交日志信息
    git diff 查看改动文件项及内容
    git status 查看分支状态
场景:在当前分支正在写需求,而被分配去其它分支修改bug或者需求,当前分支的又不想提交
        那么可以先在当前分支执行 git stash  将当前更改的文件缓存起来
        在其他分支改完之后切回原来的分支使用 git stash pop 就可以了

2.Chrome调试工具

简述: 前端工程师必备技能
1.Elements
    当前DOM结构的展示,选中页面中的Dom元素及样式(style)查看
2.Console
    代码中打印的一些信息console.log/error/log
3.debugger(Sources)
    在代码中进行书写debugger进行断点调试
    也可以在Sources源码中进行点击标记进行调试
4.Network
    资源的加载以及服务端返回的数据加载
5.Application
    操作及查看localStorage,sessionStorage,cookie的一些被存储的信息,删除增加刷新等操作

3.抓包

1.移动端h5页,查看网络请求,需要用工具抓包
2.windows一般用fiddler
3.Mac OS 一般用charles
4.手机和电脑必须连接同一个局域网
5.将手机代理到电脑上
6.手机浏览网页即可抓包
7.查看网络请求
8.网址代理
9.https
//这个具体没办法演示,可自行找视频查看,步骤大概就这些步骤
    https://www.imooc.com/learn/37   // fiddler
    https://coding.imooc.com/lesson/trysee?mid=5165  // charles

4.如何配置webpack,bable

1.基础了解
ES6模块化,浏览器暂不支持
ES6语法,浏览器并不完全
压缩代码,整合代码,让网页加载速度更快
2.webpack如何配置?

先来简单创建一个webpack环境

  • 新建文件夹
  • 然后执行 npm init -y
  • 再执行 npm i webpack webpack-cli -D
  • 在根目录下创建src文件/index.js 和 webpack.config.js(webpack默认的配置文件)
  • 如图所示: image.png
index.js 中随便输出几句话
    console.log('搭建webpack环境1');
    console.log('搭建webpack环境2');
    

webpack.config.js中配置
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        mode: 'development', // 开发  production(线上)  mode(环境设置)
        entry: path.join(__dirname, 'src', 'index.js'), // 寻找src下的index.js文件(入口)
        output: {  // 输出
            filename: 'boundle.js',
            path: path.join(__dirname, 'dist'),
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.join(__dirname, 'src', 'index.html'), // 配置模板项
                filename: 'index.html' // 打包之后产出的index.html
            })
        ],
        devServer: {
            port: 3000,
            // contentBase: path.join(__dirname, 'dist') // 启动的就是dist目录下的内容 
            // 新版的webpack-dev-server中，contentBase已经被移除了，用static替代
            // 如果contentBase这条执行失败请使用下面这一条 static(静态)
            static: path.join(__dirname, 'dist')
        }
    }
    
package.json 中配置打包命令
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "dev": "webpack-dev-server"
    },
    
执行打包命令
    npm run build    // 会生成资源文件夹dist(包含boundle.js)
        
如何在网页中跑起来呢?
    1.在src中新建一个html文件,只需要一个基本的结构就可以了
    2.然后安装俩个插件  在webpack.config.js中配置
        npm i html-webpack-plugin -D  // 用来解析html文件
        npm i webpack-dev-server -D   // 用来启动服务的插件
    3.配置完之后还需要在package.json中配置服务启动命令,还是在script中
    4.启动npm run build ----->>> npm run dev  ---->>访问http://localhost:3000/
3.bable如何配置?

配置之前先在src/index.js 写一个简单地es6求和函数 image.png 但是boundle.js中还是es6语法,如何转为es5呢? 需要一个bable来做一个编译,高级语法向低级语法转变的工具

npm i @babel/core @babel/preset-env babel-loader -D

在根目录下创建一个.babelrc的文件 // presets 来配置bable集合

1.src/index.js
    const sum = (a, b) => {
        return a + b;
    }
    console.log(sum(1,3));
    
2. .babelrc  高版本不需要配置添加此文件
    {
        // presets  bable 配置集合
        "presets" : [
            "@babel/preset-env"
        ]
    }
3. 在webpack.config.js中配置规则
    //  4.44 低版本配置
    module: {
        rules: [
            {
                test: /\.js$/,   //  只要js结尾的都走一个loader 插件
                loader: ['babel-loader'], 
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    },
    // 5.78高版本版本配置
    module: {
        rules: [
            {
                test: /\.js$/,   //  只要js结尾的都走一个loader 插件
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    详细信息可查看官网 https://webpack.docschina.org/loaders/babel-loader#root

重新打包 + 运行 那么此时就转变成功了 如果是类的话就是直接转为 function形式 image.png

5. webpack生成环境配置

在根目录下创建一个webpack.prod.js文件

  • prod===production简写
  • 配置完成之后 在package.json/scripts中修改打包默认配置
  • "build": "webpack --config webpack.prod.js",执行npm run build
  • image.png
  • 内容未修改 image.png
  • 内容修改之后 image.png
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'production',
    entry: path.join(__dirname, 'src', 'index.js'), 
    output: {  // 输出
        filename: 'boundle.[contenthash].js',  //  contenthash 根据内容给它算出一个哈希值(乱码),内容不变哈希值不变
        path: path.join(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'),
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,   //  只要js结尾的都走一个loader 插件
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
}

遗留: 至于 contenthash 怎么提高性能,后面补充,大家先自行琢磨

6. ES6 模块化规范是什么?

1.a.js中
// 按需导出
export function fn () {
    console.log('fn)
}
export const name = "3213"

// 全部
const obj = {name: '张三'}
export default {
    obj
    obj: obj,  // es5中需要这样写key value形式
}
2. index.js中引入
import { fn, name } from './a.js'  // 按需  解构赋值
import obj from './a.js'  // 全部

7.linux常用命令

1.公司的线上机器一般都使用linux (参考阿里云)
2.测试机也需要保持一致,用linux
3.测试机或者线上机出了问题,本地又不能复现,需要去排查 
本地登录线上机器地址(ip) ssh work@192.168.10.23  ---> 进入linux机器

4.常用命令
    查看当前目录下文件 ls
    查看所有及隐藏文件 ls -a  平铺展示
    查看所有及隐藏文件 ll     列表展示
    清屏  clear /  cls
    创建文件  touch 文件名
    创建文件夹  makdir 文件夹名
    删除文件夹  rm -rf 文件夹(强制删除)不会询问  没有回收站
    删除文件  rm 文件名  没有回收站
    去其他文件夹 cd 文件名
    修改文件名称 mv  index.html  index1.html
    移动文件名称 mv  index.html  ../../index.html
    拷贝  copy a.js a1.js
    进入 vim界面  vim d.js  // vim 后面的文件如果有就会直接进入  没有则直接创建  vi === vim
                1.按i键 进入insert模式 新增内容
                2.按esc键 退出insert模式
                3.按出冒号: 输入w  内容写入并且保存成功
                4.按q为退出vim
    打印文件的所有内容   
            cat  文件名  (查看全部) 
            head 文件名  (头部几行)  
            tail 文件名  (查找最末尾几行)
    查找文件内容   grep  要搜索的内容 文件名
avatar
文章
阅读
粉丝