【前端工程化】篇七 沧海遗珠-其他工具

2021/03/31 posted in  工程化
Tags:  #工程化

【前端工程化】系列文章链接：

示例代码仓库：https://github.com/BWrong/dev-tools

声明：如按照文中代码执行报错，请检查依赖版本是否和示例代码仓库中一致。

除了前面我们介绍的几种工具外，其实还有很多实用的工具，但是由于太简单了，没必要单独开一篇文章来讲，所以这里就简单介绍一下。

MOCK服务

有的时候，为了赶进度，需要前后端同时开发，接口出来之前，就需要前端进行数据Mock，等接口出来再进行联调。

数据Mock一般有如下几种方式：

我在项目中一般会使用第三种请求拦截，这里就简单分享下我项目中的做法。主要使用@bwrong/mock，利用webpack-dev-server的before钩子来做数据mock，以vue项目为例：

实现了如下功能：

  • mock的文件更新，会自动重载
  • 支持接收请求参数，动态处理返回数据
  • 延迟响应：可以设置延迟响应时间，应对调试loading的场景
  • 自定义header：可以全局设置header，也可以为某个mock接口设置header
  • 可以使用mockjs语法
npm i -D @bwrong/mock

// webpack.config.js
const mockServer = require('@bwrong/mock');

module.exports = {
    // ...
    devServer: {
        before(app) {
          mockServer(app, resolve('./mock/'), {
            pattern: '**/[^_]*.js',
            delay: 0,
            prefix: '/api',
            debug: true,
            headers: {},
            watchOptions: {}
          });
        }
    }
}

在mock目录中，index.js用来做文件自动载入，而其他文件则为模拟数据，每个功能模块可以分割为一个文件，模块化管理。

提示：mock的这些文件是在webpack中使用的，需要遵循commonjs规范。

const list = {
  code: 0,
  msg: '',
  'data|10': [
    {
      id: '@id',
      name: '@cname',
      des: '@csentence',
      web: '@url',
      photo: '@image',
      address: '@county(true)',
      email: '@email',
      lastIp: '@ip',
      date: '@datetime(yyyy-MM-dd hh:mm:ss)'
    }
  ]
};
const info = {
  code: 0,
  msg: '',
  data: {
    id: '@id',
    name: '@cname',
    department: 'xxx',
    jibTitle: 'yyy',
    org: 'zzzzz',
    count: {
      sum: '@integer(0,10000)',
      score: '@float(0,5,0,2)',
      today: '@integer(0,200)',
      reservation: '@integer(0,200)'
    }
  }
};
module.exports = [
  {
    url: '/user',
    response: list
  },
  {
    url: '/testhtml',
    method: 'get',
    headers: {
      'Content-Type': 'text/html'
    },
    response: '<html><h1>html测试</h1><a href="https://www.bwrong.cnm">bwrong</a></html>'
  },
  {
    url: '/user/info/:id',
    response: (req,res) => {
      return {
        ...info,
        id: req.params.id
      }
    }
  }
];

如上仅提供一种思路，如果有更好的方法，欢迎勾搭。

Browserslist

用于在不同前端工具之间共享目标浏览器和Node.js版本的配置，消除在每个工具中进行配置的烦恼。
可用于：

  • autoprefix
  • babel
  • postcss-preset-env
  • eslint-plugin-compat
  • stylelint-no-unsupported-browser-features
  • postcss-normalize
  • obsolete-webpack-plugin

配置方式

  • package.json中
"browserslist": [
    "defaults",
    "not IE 11",
    "not IE_Mob 11",
    "maintained node versions"
]
  • .browserslistrc
last 1 version
> 1%
IE 10

更多使用方式请查看browserslist。

PostCSS

PostCSS是一个允许使用插件来进行样式转换的工具，本身相当于一个平台，通过这个平台我们可以添加相应的插件，来实现各种转换，如autoprefixer、cssmodules、stylelint，而且可以和很多工具结合使用。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

// postcss.config.js
module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer')
  ]
}

具体的使用方法请查看官方文档官网。

Git

我相信，git大家都很熟悉了，而且网上的教程也有很多，这里我就不介绍了。但是在使用的过程中我发现有两个问题还是值得再提一下。

  • 分支管理：很多人都是只有一个master分支，所有的东西都是在上面操作，这样在大一点的团队或者有多个环境的时候，会很不方便。所以便有了分支管理策略的说法，可以看看阮一峰老师的文章Git分支管理策略。
  • 提交信息：我曾经遇到过一个同事，所有的git提交信息都是'修改'，如果要让做代码回溯，我相信加班是跑不脱了。友好的提交信息不仅可以清晰的看到开发记录，而且还可以用来生成更新日志。关于提交规范，社区其实有很多方案，目前用的比较多的是Angular规范，也可以看看阮一峰老师的另一篇文章Commit message 和 Change log 编写指南

这些方案都是一些参考，并不一定就适合每个团队，最好的是根据团队情况制定出符合需求的一套规范，因地制宜才能事半功倍。

阅读资料：项目规范化开发探索

EditorConfig

EditorConfig有助于维护跨多个编辑器和IDE从事同一项目的多个开发人员的一致编码风格，团队必备神器。

.editorconfig文件:

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file 表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件
root = true

# Unix-style newlines with a newline ending every file 对于所有的文件  始终在文件末尾插入一个新行
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset  对于所有的js,py文件，设置文件字符集为utf-8
[*.{js,py}]
charset = utf-8

# 4 space indentation 控制py文件类型的缩进大小
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified) 设置某中文件的缩进风格为tab Makefile未指明
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory  设置在lib目录下所有JS的缩进为
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml 设置确切文件 package.json/.travis/.yml的缩进类型
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

配置说明：


indent_style    设置缩进风格(tab是硬缩进，space为软缩进)
indent_size     用一个整数定义的列数来设置缩进的宽度，如果indent_style为tab，则此属性默认为tab_width
tab_width       用一个整数来设置tab缩进的列数。默认是indent_size
end_of_line     设置换行符，值为lf、cr和crlf
charset         设置编码，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用utf-8-bom
trim_trailing_whitespace  设为true表示会去除换行行首的任意空白字符。
insert_final_newline      设为true表示使文件以一个空白行结尾
root           表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件

 脚手架

脚手架大家都不陌生，VueCli、Vite、CreateReactApp我相信大家都是比较熟悉了，他们的目的都是快速生成项目模板，提高开发效率。但是这些模板都是很基础的，当团队有一定规模或者有一定积累的时候，定制一些自己的项目模板就很有必要了。这时就可以考虑自己开发一套脚手架来管理这些模板，方便管理维护。

这类的文章网上多如牛毛，其内容都是差不多，大致分为两种：

  • 基于Yeoman实现：相当于一个开发脚手架的框架，很多东西它已经提供，自己吧模板放进去就OK，社区也有很多模板可以使用。
  • 开发脚手架：灵活，整个底层需要自己借助一些工具实现，具体的可以查看我之前的一篇博客也来盘盘前端脚手架的那些事儿。

结语

终于写完了，原本计划一个月结果拖拖拉拉到差不多三个月，不过总归是有所成果了。

初衷

写这系列文章，其实有几个因素：

  • 自己对效率工具类的东西比较感兴趣，可能是因为技术太渣了吧
  • 帮助团队提高开发效率和质量，现在不都是讲合作吗，只有团队提升了，自己才能获得更好的成长，水涨船高嘛

问题

由于第一次写这种长文，问题不少：

  • 文章内容组织欠佳
  • 文章排班还需要优化
  • 文字功底还需要提升
  • 拖延比较严重，前面激情满满，后面停滞不前
  • ...

后续计划

后面如果有时间，这个系列可能还会更新一些东西：

  • 开发规范
  • 自动化测试
  • CI/CD

自己收获还是蛮大的，为了尽量保证内容的完备性和正确性，会去查阅很多资料，加深了记忆；而且把这些列知识串起来了，不再是一个个孤岛，更加系统化了；另外有了这部分内容，收藏夹好多吃灰的文章就可以解放了。

« 【Vue3】实用指南 【前端工程化】篇六 规矩方圆-ESLint »