掌握这些快速适应企业前端项目开发 — 给正在找实习的同学们

840 阅读6分钟

一、前言

大家好,我是一名热爱前端的大三学生。从开始学前端到现在有一年左右的时间了,前段时间结束了在某网络安全公司的实习。这是我的第一次实习,虽然说之前在学校里面有过一些个人项目经验,但是到了公司刚开始很多东西都还是难以应对。经过几个月的实习我有一些东西想要总结给大家,希望给还未有过实习经验的同学们一些帮助。这次总结的主要是工具使用和技巧相关的,之后可能会挑一些遇到的问题总结,大佬们轻喷哈。

二、项目环境

对于刚进公司一般都会发放电脑,有些大厂甚至会发 mbp (实名羡慕),第一天大家一般装一装开发的环境。例如 node 、npm 、git 、 vscode 这些相信大家都不陌生,我就不细说了。之后应该会有师兄把你拉入 gitLab 的项目,你拉一下代码到本地,就可以根据文档开始熟悉项目了。

1、环境分类

在公司中一个项目的开发会有本地环境、测试环境、正式环境,甚至还有预发布环境。

  • 本地环境:当然就是你在自己电脑上启动的服务
  • 测试环境:当每次提交代码并且合并后,一般就可以在测试环境访问你提交的代码,这个主要是由测试人员进行日常需求开发的测试。
  • 预发布环境:在我实习的公司的话是这个环境是在每次要发布一个版本前将测试环境的代码都合并到预发布环境,进行正式发布前的最后测试。
  • 正式环境:代码最后没有问题才可以正式上线。

2、项目配置

在项目开发时本地环境并不是只有你一个人访问,在学校里面的个人项目本地服务地址的用一用 localhost 也还好,但是在公司中你的环境也要能够被同事电脑能访问,而且能够随时更换后台。

  • 当你的某个需求做完了,项目经理想要在他电脑验收一下看看效果,这时就需要你把你的前端服务的地址给他,所以 localhost 肯定是不行的。
  • 在进行项目开发时一般都会和后端的同学进行对接,但是后端的同学也是同时在开发,我们连接的后端就不一定是已经上线的后端地址,而也是后端同学自己的本地服务,这时我们就需要能够动态的去更换后台地址。

我们将会进行如下配置,在项目最外层目录下新建一个 .env.local 文件,添加以下配置。

# 本地服务地址
LOCAL_URL = 192.168.109.153
PORT = 8000

# 后台地址
# 张三的后台
 BACK_END = 192.168.109.153:3000
 
# 对于暂时不需要的地址加个 "#" 注释即可
# 李四的后台
# BACK_END = 192.168.109.100:3000

vue.config.js 配置

module.exports = {
  devServer: {
    host: process.env.LOCAL_URL,
    port: process.env.PORT,
    proxy: {
      "/api": {
        target: `http://${process.env.BACK_END}`
      }
    }
  }
}

公司一般都是在内网下开发,本地服务填写自己电脑分配的 ip 地址即可,这样同事之间可以互相访问。

对于 devServer 中的 proxy 的作用是能够将项目中所有以 /api 开头的请求地址代理到 target 对应的地址。

例如,下面代码中的请求地址将会被代理到 http://192.168.109.153:3000/api/lookup/testinfo

// 以 Vue 项目为例
<script>
import axios from 'axios'
export default {
  name: 'EnvTest',
  data() {
    return {
      list: []
    }
  },
  mounted() {
    axios.get('/api/lookup/testinfo').then(res => {
      if (res && res.success) {
        this.list = res.data.data;
      }
    })
  }
}
</script>

但是实际上在浏览器中请求的是 http://192.168.109.153:8000/api/lookup/testinfo,与前端的服务地址同源,所以这样也可以避免跨域问题。

proxy

这是在本地环境中使用 devServerproxy 实现代理,在项目上线后一般会使用 nginx 作为反向代理。

更多关于环境变量的配置你还可以看下 Vue Cli 的官方文档:戳这里

三、插件与技巧

1、Vscode 插件

(1)Eslint

使用 Vscode 开发的同学肯定对插件都不陌生,要使用什么功能都要自己配置,但是我要特别提一下这个 Eslint 插件。不知道有多少同学平常个人开发项目时感觉使用 Eslint 比较受拘束,用着不爽,我之前甚至直接将它禁用。但是,到了公司开发它肯定是必不可少的,多人开发项目风格肯定要做到尽量统一,也是方便他人。你想象一下如果有人不使用 Eslint ,随意按自己的风格来,自己要开发维护这些代码时编辑器到处飘红飘黄会有多难受。所以,大家在平常开发时就要多多习惯起来,网上有很多 Eslint 的配置大家可以去参考。

(2)Gitlens 和 Git History

安装插件后右上方导航栏以及右键点击代码区可以看到相关操作

在公司中是多人协作,有时候需要查看代码提交的日志,如果能在当前代码中查看到那是很方便的一件事,能省去很多时间去其他工具查看,提高开发效率。

下面举几个特别实用功能:

1、将鼠标点击代码的每一行都可以看到后面显示出代码是谁提交的、提交时间以及 commit 信息。将鼠标放到该信息上面可以显示更详细的提交记录。

开发时发现哪一块代码有问题可以快速找到罪魁祸首,逃不掉的哈哈,所以大家都得认真写呀。对于哪一块代码自己有不懂的地方也可以方便找到写它的师兄去问一问。

2、点击 “Open Changes with Previous Revision” 可以查看与之前版本的代码改动对比

3、点击 “Toggle File Blame” 可以查看某个文件所有的历史提交记录。

除了上面这些插件,还有许多大家日常就用到的,我就不多说了,利用好这些插件是真的能够提高开发效率的。

2、Vscode 技巧

(1)快捷键

1、查找相关

公司的项目往往文件非常多,一个文件也包含很多行代码,自己靠眼睛一个个去找往往特别麻烦,掌握这些快捷键就可以飞速找到自己想要的文件或文本。

  • ctrl + f - 搜索文本。选中需要搜索的文本,按住此快捷键,即可按回车键搜索所有匹配文本。
  • ctrl + h - 替换文本。
  • ctrl + p - 按文件名搜索项目中的指定文件。
  • vscode 左侧工具栏 Search - 搜索文本或文件。这里与上面讲的快捷键不同,它会按照文件名和文件内容搜索项目中所有文件,它是非常全面的搜索了。

2、编辑相关

  • ctrl + d - 选中需要编辑的相同文本同时编辑。将光标放置到要编辑的文本末尾,然后多次按下此快捷键即可同时选中,然后同时进行编辑。

  • shift + alt + 上键 / 下键 - 将一行文本快速复制多份出来。

  • alt + 上键 / 下键 - 将代码进行上下移动。这个的适用场景我举个例子。比如在 Vue 中需要向组件或元素传递多个属性时,往往每个属性独占一行,有时调试的时候我想注释掉某个属性看看效果,直接注释肯定是不行的,这就可以用到这个快捷键将该属性先移动出去再注释。

(2)使用 Source Control

除了前面讲过的 Gitlens 的插件外,vscode 在左侧工具栏也有自带的 Source Control ,在 git 操作方面有些也挺好用的。这里可以直接查看各改动文件的状态,以及直接可以使用 GUI 的方式进行 git 的操作。点击文件后也可以弹出当前改动后的文件与改动前的对比,建议大家在每次要提交代码前都这样查看一下自己所有的改动记录,以免造成不必要的改动或错误。

(3)使用 vscode 内置终端

按住 ctrl + ` 即可打开内置终端。

不知道大家有没有和我以前一样每次启动都喜欢通过 cmd 来打开各种服务和操作,导致任务栏每次一大堆东西,非常不易于管理,这样通过内置的终端来启动服务和进行一些操作还是比较方便的,这个能直接输入中文而且也相对好看一些。

3、Chrome 浏览器

(1)插件

首先要推荐的是各个框架的开发者工具,例如 Vue.js devtools 和 React devtools 。

1、Vue.js devtools

这里以 Vue.js devtools 为例。使用该插件可以查看组件的结构、状态管理、路由、事件等等,在进行项目调试的时候非常友好。我今天主要讲的是 Open in editor 功能。该功能在小项目可能不太起眼,但是在公司项目中往往目录结构、组件的引入比较复杂,手动找就比较麻烦,而通过该插件选中组件后可以快速跳转至 Vscode 中相关组件的代码。

实现该功能需要进行一下配置(好像不用配置也可以,大家根据自己的情况来)

(1)首先安装 launch-editor-middleware

(2)在 vue.config.js 中进行一些配置

const launchMiddleware = require('launch-editor-middleware')

module.exports = {
  devServer: {
    before (app) {
      app.use('/__open-in-editor', launchMiddleware())
    }
  }
}

(3)最后,按住 ctrl + Shift + P打开 Command Palette,输入shell command,点击 “Install 'code' command in PATH”即可。(windows 的用户安装 vscode 时好像默认将 code 添加到环境变量了)

在我配置的时候发现当路径名称中有空格时配置的环境变量会找不到,因为 Vscode 安装时默认放至了一个叫 Microsoft VS Code 的目录了,大家注意文件名中还是不要有空格。

我在这里多讲一下这个关于找文件和找页面的问题:

我刚开始进公司的时候对项目的代码和页面都不太熟悉,在做一些需求的时候想要根据代码去找到具体的页面或根据页面找到相关的代码就挺吃力的,我说一下收获的一些技巧。

  • 根据页面找代码: 前面提到了 open in editor 的插件是比较好用的,但是对于一些 js 文件就比较难找了。首先最容易的是找到页面上的关键词,然后用这些关键词到 vscode 中进行搜索,搜索到匹配的文件后,再用这个外层的文件通过它的 import 的路径又一层层往内部找到具体需要的文件。这里需要注意的是像 Vue2 中的 mixin , 有时你会发现某个方法莫名其妙的被使用了却找不到定义它的地方,这时就一般都是定义在 mixin 的文件中了。

    一些内容是由后端接口输出来的,关键字就不起作用了,那么一开始可以通过页面的 url 找到它在路由文件中定义的地方,再由路由找到该组件进行查找。

  • 根据代码找页面: 那这正好和上面相反,由内往外查找,通过搜索文件路径找到引入它的上一层文件,当找到组件时基本上通过名字就知道它大概对应的是哪块页面了,如果还是不清楚还是可以再借助路由找到相关的 url 即可。这里要注意的是一些文件引入时可能会省略 .vue.js 的后缀,所以搜索时不要匹配的太全了,路径也尽量相对路径,可以多尝试一些不同长度的相对路径。如果往上查找时发现感觉没有被任何文件引用,那么可以通过先将该文件删除,然后查看启动的服务是否被更新来确定,如果是那么肯定还是被引用了的。

2、FeHelper

这个插件的扩展功能非常多,例如 JSON 美化、代码美化、正则表达式等等。

像是这个 JSON 美化的工具对于前端同学来说就很实用,对于后端给的接口我们有时候想改变不同的参数测试一下接口返回的数据时就可以直接在浏览器中查看。当然,对于一些其他类型的请求大家还是需要使用 postman 。

(2)代码调试

不知道有多少同学和我以前一样每次调试代码时都是打一个个的 console.log() 再到控制台查看,这样的效率是及其低下的,掌握浏览器自带的调试工具还是很有必要的。

在浏览器的控制台菜单栏找到 Sources ,按住 ctrl + p 搜索需要调试的文件,打上端断点,然后刷新页面,当执行到断点时就会自动停下,页面也会停止渲染,此时可以将鼠标放到需要查看的变量上面即可查看该变量当前的值。和很多调试工具一样右上角的工具也可以控制代码的执行方式是跳至下一个断点、函数等等。它还可以查看 listener 和监听具体的变量等等,大家可以网上查找资料更详细的学习。

四、开发规范

1、代码规范

公司都会有自己的一套代码规范,像是驼峰命名原则、缩进空格数、用单引号还是双引号等等,这些基本上在 Eslint 中就会体现出来了,不正确就会飘红,公司也会有相应文档我就不多说了。下面我说一些我认为重要的地方。

  • 在开发时肯定会遇到一些已经有的组件或封装的方法,不要写重复代码,参考之前的用法用就好,既能提高开发效率也能保证代码的统一性和可维护性。

  • 各种变量或组件名的命名要尽量语义化,多写注释,方便他人也方便自己。你想一想你一开始拿到一个项目都几乎没有注释看起来会有多费劲。养成写注释的好习惯很重要。

  • 对于一些经常用到的 CSS 样式通常会定义到公共的文件中,像是一些颜色、字体大小等不要自己直接写数值,需要引用公共文件已经定义好的变量(使用 SASS 或LESS 预处理器),这样有利于代码的维护,比如日后要更换主题色可以很方便直接在公共文件中修改就好,而不用费劲的一个个地方改。

    变量定义 (src/styles/_variables.scss)

    // 颜色
    $white: #fff !default;
    $gray-100: #f8f9fa !default;
    $gray-200: #e9ecef !default;
    $gray-300: #dee2e6 !default;
    $gray-400: #ced4da !default;
    $gray-500: #adb5bd !default;
    $gray-600: #6c757d !default;
    $gray-700: #495057 !default;
    
    // 字体大小
    $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
    $font-size-lg: $font-size-base * 1.25 !default;
    $font-size-sm: $font-size-base * .875 !default;
    $font-size-root: null !default;
    

    使用 (需要先将上面样式文件导入入口文件中)

    .box {
    	width: 100px;
    	height: 100px;
    	color: $gray-300;
    	font-size: $fony-size-sm;
    }
    

    mixin 定义 (src/styles/_mixin.scss)

    将多个需要重复使用的样式定义在 mixin 中

    @mixin button-size($padding-x, $padding-y, $font-size, $border-radius) {
      padding: $padding-y $padding-x;
      font-size: $font-size;
      border-radius: $border-radius;
    }
    

    使用

    .btn-sm {
      @include button-size($btn-padding-x-sm, $btn-padding-y-sm, $btn-font-size-sm, $border-radius-sm)
    }
    

    以上都是 scss 中的一些写法,大家可以去 scss 或 less 的官网更详细的学习。

2、Git 规范

  • 公司里使用的代码仓库大部分应该都是 Gitlab , 都要配置好姓名、工号和邮箱等等。每次开发一个需求都要创建一个新的分支,命名一般以开发的需求名称加上自己姓名首字母(例如: feature-project-filter-tc),加上自己的项目首字母是为了防止与他人的分支重名。
  • 每次提交代码前一定要记得先拉一下线上的代码,否则在 gitLab 上就会看到落后多少个分支,甚至可能和同事的产生冲突,无法被自动合并。
  • commit 规范:一般 commit 的 message 都要以固定格式开头,同事一眼就能知道你的这个提交做了什么事情。不同的公司可能规范不同,大致有以下的类别大家可以参考。
    • feat:增加了新功能
    • fix:修补 bug
    • docs:文档
    • style: 格式变化,不影响代码运行的变动
    • refactor:重构代码(即不是新增功能,也不是修改bug的代码变动)
    • test:增加测试
    • chore:构建过程或辅助工具的变动
  • push 自己分支的代码之后不能够在本地直接 merge 你的代码到主分支,你也没有权利去做代码合并。将自己的代码提交之后就要去 Gitlab 上创建一个合并请求,请求合并到主分支。会有专门的负责人对你的代码进行 review ,检查代码的一些逻辑问题和代码规范等等。如果出现问题负责人将会给一些评论,这时你需要根据评论再次修改代码,然后重新提交。只有当问题都解决了,你的代码才会被合并到主分支,这时你的任务才完成。

五、体会与建议

  • 每个实习生都会有导师带,刚开始肯定会遇到很多问题,遇到问题多问导师,哪怕感觉导师很忙也还是可以问问的,或者问身边同事也可以。
  • 与前端协作的比较多的就是后端、项目(产品)经理、UI (交互)设计师。平常开发时多与他们进行沟通,虽然有时可能会遇到与他们意见不一,但多讨论总是没错的。像是与后端对接时接口和传的参数一定要要求后端给好文档,尽量对每个参数详细说明,能避免很多不必要的一些交流。
  • 开发时很有可能需要对以前的代码进行维护或者在此基础上进行新功能的开发。修改时一定要充分理解之前那块代码的含义,考虑改动后可能引发其他引用这块代码的文件可能会产生的问题,否则很有可能改动引发出一些新的 BUG 。
  • 最后,在实习过程中也要多做总结,对于项目中遇到的一些难点或问题都要记录下来。实习也是为了学习和提升自我嘛,不要只是为了做需求而做需求,多总结在今后面试中也是一笔宝贵财富。希望大家能够找到满意的实习,并且能够快速适应公司的项目开发。

我也是第一次实习哈,可能说的有些地方不一定正确,大家有任何问题可以评论告诉我。