这是我参与「第四届青训营」笔记创作活动的第1天

项目简介

这次参加字节青训营，大项目选择的是前端监控系统。前端监控系统可以自动收集、上报、存储Web页面关键数据。

Rollup

打包构建工具采用 Rollup，Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。与Webpack偏向于应用打包的定位不同，rollup.js更专注于Javascript类库打包。

创建脚手架

默认以下环境已经安装node、npm、yarn

1.构建基本文件结构

创建项目的文件结构，并且初始化package.json

mkdir web-monitor-sdk
cs web-monitor-sdk
npm init -y

2.初始化typescript环境

安装typescript

yarn add typescript -D

生成typescript配置文件

npx tsc --init

tsconfig.json 配置如下

{
  "include": ["src/", "types/"],
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "lib": ["DOM", "ES2015"],
    "declaration": true,
    "declarationDir": "./dist/types",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  }
}

3.Git

代码存在本地，但为了更好的代码版本管理/备份，将使用 Git 工具并和远程仓库关联起来。

初始化git

git init

创建 .gitignore 文件并忽略那些不需要存入 Git 版本的文件或文件夹

node_modules
dist
yarn-error.log
.DS_Store

4.安装rollup

使用Rollup来作为打包工具，可以帮我们构建出sdk。

yarn add rollup -D
yarn add @rollup/plugin-typescript -D

创建并配置 rollup.config.js

目前打包生成的是iife立即调用函数，配置的全局变量为_monitor，后续可以通过调用全局变量的init方法配置数据上报的地址。

import typescript from '@rollup/plugin-typescript'

const plugins = [typescript()]

export default [
  {
    plugins,
    input: 'src/index.ts',
    output: {
      file: 'dist/monitor.js',
      format: 'iife',
      name: '_monitor',
      sourcemap: true,
    },
  }

修改package.json，配置打包命令。

"scripts": {
    "build": "rollup -c",
 },

5.eslint

团队开发中除了使用ts，还可以使用eslint约束代码风格。

安装eslint

yarn add eslint -D
yarn add @typescript-eslint/parse -D

目录下创建.eslintrc.js文件并配置，后续可以根据团队规范，增加rules下的规则。

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  parser: '@typescript-eslint/parser',
  extends: ['prettier'],
  parserOptions: {
    sourceType: 'module',
  },
  rules: {
    'prefer-const': 'error',
    'no-console': 'off',
    // 要求使用 === 和 !==
    eqeqeq: 'warn',
  },
}

创建.eslintignore让eslint忽略不需要检查的文件

# eslint 忽略检查
node_modules
dist
.yarn-error.log
.DS_Store

6.prettier

前端开发项目中会涉及到一些代码格式问题，比如函数括号后空格，CSS 格式，因此可以借助 Prettier 三方工具来实现团队代码的自动统一。

eslint-config-prettier 解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效。

安装 prettier 和 eslint-config-prettier

yarn add prettier -D
yarn add eslint-config-prettier -D

创建 .prettierrc.js 并配置

module.exports = {
  tabWidth: 2,
  printWidth: 100,
  singleQuote: true,
  semi: false,
  overrides: [
    {
      files: '*.json',
      options: {
        printWidth: 200,
      },
    },
  ],
  arrowParens: 'always',
}

7.Husky和commitlint

husky 是一个为 git 客户端增加 hook 的工具。安装后，它会自动在仓库中的 .git/ 目录下增加相应的钩子；比如 pre-commit 钩子就会在你执行 git commit 的触发。

那么我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。

commitlint 可以约束我们在 git commit 命令中提交的msg是否符合一定的规范。

安装依赖

yarn add husky lint-staged -D
yarn add @commitlint/cli @commitlint/config-conventional -D

修改 package.json

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
 },
 "commitlint": {
   "extends": [
     "@commitlint/config-conventional"
   ]
 },
 "lint-staged": {
   "*.{ts,js}": [
     "eslint src --fix --ext .ts,.js",
     "prettier --write \"src/**/*\""
   ]
 },

这样配置好了后，开发者在 git commit 时，会首先调用 lint-staged 字段中命令，首先是 prettier 格式化，然后是 ESlint 校验并修复，然后将修改后的文件存入暂存区。

然后是校验 commit message 是否符合规范，符合规范后才会成功 commit。

常用的commit type:

类型	描述
build	编译相关的修改，例如发布版本、对项目构建或者依赖的改动
chore	其他修改, 比如改变构建流程、或者增加依赖库、工具等
ci	持续集成修改
docs	文档修改
feat	新特性、新功能
fix	修改bug
perf	优化相关，比如提升性能、体验
refactor	代码重构
revert	回滚到上一个版本
style	代码格式修改, 注意不是 css 修改
test	测试用例修改

Rollup+ts的初始开发环境 | 青训营笔记