用TypeScript + rollup + commitizen + husky打造一个坚不可摧的JavaScript代码库

2023-12-07 09:22:08

前言

工欲善其事，必先利其器。作为JavaScript开发者，选择一个趁手的IDE可以大大提升开发效率。VS Code作为一款广受开发者欢迎的IDE，因其轻量、快速、插件丰富的特点而备受青睐。得益于其活跃的社区，市面上出现了大量的VS Code插件，可以满足开发者的各种需求。

说到代码构建和打包，Node.js是一个绕不开的话题。Node.js是一个基于Google V8引擎构建的，事件驱动的、非阻塞I/O的服务端JavaScript环境。Node.js不仅可以轻松搭建服务器，还提供了丰富的库和工具，让前端工程师可以轻松构建和打包代码。

搭建环境

在开发之前，我们首先需要搭建开发环境。

安装Node.js
安装VS Code
安装TypeScript插件
安装rollup插件
安装commitizen插件
安装husky插件

使用TypeScript编写代码

TypeScript是一种由微软开发的开源编程语言，它增加了对JavaScript的类型检查功能，使代码更加严谨和易于维护。

// 定义一个类
class Person {
  // 构造函数
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 方法
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// 创建一个Person对象
const person = new Person('John Doe', 30);

// 调用Person对象的greet方法
person.greet();

使用rollup打包代码

rollup是一个JavaScript模块打包器，它可以将多个JavaScript模块打包成一个或多个文件。rollup可以与各种流行的前端框架一起使用，包括React、Vue和Angular。

{
  // 输入文件
  input: 'src/index.js',

  // 输出文件
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
  },

  // 插件
  plugins: [
    // 将TypeScript代码编译成JavaScript代码
    typescript(),

    // 将JavaScript代码打包成一个文件
    rollupPluginBabel(),
  ],
}

使用commitizen管理提交

commitizen是一个命令行工具，它可以帮助你规范提交信息，使提交历史更加清晰。

{
  // 作者
  author: 'John Doe',

  // 电子邮件
  email: 'johndoe@example.com',

  // 提交类型
  types: [
    // bug修复
    { value: 'fix', description: '修复了一个bug' },

    // 新特性
    { value: 'feat', description: '添加了一个新特性' },

    // 优化
    { value: 'perf', description: '优化了性能' },

    // 文档更新
    { value: 'docs', description: '更新了文档' },
  ],
}

使用husky确保提交质量

husky是一个Git钩子工具，它可以在提交代码之前执行一些操作，以确保代码质量。

{
  // 提交前
  'pre-commit': 'npm run lint && npm test',
}

构建CI/CD流水线

CI/CD流水线可以自动执行代码构建、测试和部署的过程，从而提高开发效率和质量。

- job: build
  stage: build
  script:
    - npm install
    - npm run build

- job: test
  stage: test
  script:
    - npm run test

- job: deploy
  stage: deploy
  script:
    - npm run deploy