rollup + ts + jest + eslint + husky + commitlint + vuepress搭建工具类库

使用rollup + ts + jest + eslint + husky + commitlint搭建前端工具类库

创建项目

首先创建项目

mkdir web-toolkits && cd web-toolkits
npm init -y

安装相关依赖首先把项目中相关基础依赖安装完成

yarn add rollup typescript jest husky commitlint vuepress -D

├─test
├─packages
├─docs
├─.babelrc
├─.eslintignore
├─.eslintrc.js
├─.gitignore
├─commitlint.config.js    
├─package.json
├─readme.md
├─rollup.config.js        
├─tsconfig.json
├─yarn-error.log
├─yarn.lock

其中packages用来存放开大的工具方法文件，test用来存放单元测试相关文件，docs用来存放文档相关

rollup配置

安装依赖首先安装rollup所需依赖

yarn add @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-eslint @rollup/plugin-json @rollup/plugin-node-resolve rollup-plugin-commonjs rollup-plugin-delete rollup-plugin-node-builtins rollup-plugin-terser rollup-plugin-typescript2 -D

配置新建rollup.config.js文件来做打包相关配置

import path from 'path'
// babel 转化代码
import babel from '@rollup/plugin-babel'
// 解决node_modules三方包找不到问题
import resolve from '@rollup/plugin-node-resolve'
// 解析cjs格式的包
import commonjs from '@rollup/plugin-commonjs'
// 解决node api使用问题
import builtins from 'rollup-plugin-node-builtins'
// ts编译插件
import typescript from 'rollup-plugin-typescript2'
// 压缩代码
import { terser } from 'rollup-plugin-terser'
// 处理json问题
import json from '@rollup/plugin-json'
// 配置别名
import alias from '@rollup/plugin-alias'
// 打包前删除原有目录
import del from 'rollup-plugin-delete'
import eslint from '@rollup/plugin-eslint'
import pkg from './package.json'
const getPath = _path => path.resolve(__dirname, _path)

export default {
  input: './packages/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'esm'
    }
  ],
  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
  plugins: [
    del(),
    builtins(),
    json(),
    alias({
      entries: {
        '@packages': './packages'
      }
    }),
    eslint({
      throwOnError: true,
      throwOnWarning: true,
      include: ['packages/**'],
      exclude: ['node_modules/**', 'dist/**']
    }),
    typescript({
      tsconfig: getPath('./tsconfig.json'), // 导入本地ts配置
      extensions: ['.ts', 'tsx']
    }),
    babel({
      babelHelpers: 'runtime',
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs(),
    terser()
  ]
}

添加npm scripts

在package.json文件中添加npm script,并指定main和module字段

{
  "main": "./dist/index.cjs.js",
  "module": "./dist/index.esm.js",
  "scripts": {
    "build": "rollup -c",
  },
}

打包测试在package文件夹下新建test文件，新建index.ts文件用来测试打包,package文件下新建index.ts文件作为入口文件

// test/index.ts
export const add = (a: number, b: number): number => {
  return a + b
}

// index.ts
export * as test from './test'

运行yarn build命令，可以看到打包成功

eslint配置

安装依赖由于项目采用的ts格式文件，所以需要在eslint过程中加入解析ts的插件

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

eslint配置在项目根目录新建.eslintrc.js文件,这里只做了一些基础配置，具体的rule配置可以按需求添加

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    ENV: true
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  rules: {
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    'import/no-unresolved': 0,
    'no-unused-vars': 0
  }
}

添加.eslintignore文件

/dist
/node_modules

单元测试

项目使用jest作为单元测试框架，新建test目录，在test目录下添加index.test.ts文件

示例

import { test } from '../../packages'

describe('test', () => {
  it('add', () => {
    expect(test.add(1, 2)).toBe(3)
  })
})

添加npm scprit

{
  "test": "jest --coverage",
}

执行测试

执行yarn test命令，可以看到控制台输出了测试报告

husky + commitlint

安装相关依赖

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

添加npm scprit

{
  "prepare": "husky install",
}

commit钩子执行以下命令在项目提交commit的时候会执行eslint校验以及commit规范校验

npx husky add .husky/pre-commit "npm run lint npm run test"
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

文档编写

项目采用的文档生成工具是vuepress

安装依赖

yarn add vuepress -D

配置信息

新建docs文件夹用来存储文档，在docs文件夹下新建.vuepress文件夹，用来存放一些配置信息

在.vuepress下新建config.js文件,配置信息如下

module.exports = {
  title: 'Ubras tools',
  description: '工具类库',
  themeConfig: {
    sidebar: ['/guide/', '/demo/']
  }
}

由于项目使用默认主题，可以根据自己需要来进行相关配置

开发调试

在开发过程中，如果需要引入项目中做调试，推荐使用yalc的方式软链到项目中

yalc publish // 将类库发布到全局依赖
yalc add web-toolkits // 在项目中引入类库
yalc remove --all // 移除软链的类库

注意：在项目上线时，一定要报yalc软链替换成真实的npm包

发布npm

安装nrm nrm是一个管理npm源的全局npm包，

npm i -g nrm

nrm ls查看npm源列表
nrm add添加npm源
nrm remove删除npm源
nrm use切换npm源

nrm在开发时切换npm源极为方便，假如公司有npm私库，要发布到公司的npm库上时，只需要使用nrm use切换到对应源上

发布

npm publish