探索AI时代下，前端开发的新模式

前言

在本文中，我们将通过chatgpt的协助，深入探讨构建一个业务中必备的前端js工具函数库的全过程。借助人工智能，我们将颠覆传统的开发方式，探索在AI时代下前端工程师的全新工作模式，为业务开发提供更高效、智能的解决方案。

需求分析

一个优秀的js工具库，至少应该包括以下几个方面

1.对于使用者

清晰的使用文档（vitepress）
健全的类型提示(typescript)
完整的单元测试(jest)

2.对于开发者

eslint
pritter
commitlint
ci/cd

开发之前

在传统的模式，在我们开发时，会先去查阅文档并根据文档，一步一步的创建项目，安装依赖，配置各种规则，手写具体函数，手写单元测试等等。

在AI的时代，我们尝试将我们的需求描述给chatgpt，让它帮我们写代码。

在开始之前，通常需要先给chatgpt设定一个角色，例如：

你是一个资深的前端专家，而我是一个前端新手，请你在接下来的对话中，帮我解决我提出的问题，你需要一步一步的进行回答

这样可以提升chatgpt回答的准确率

创建项目

将以下内容发送给chatgpt

请告诉我如何创建一个typescript版本的vitepress项目，并配置eslint，prettier，husky，commlitlint，请你一步一步的告诉我具体的实现步骤

根据chatgpt的回答，进行配置

步骤1：创建vitepress项目

bash 复制代码

mkdir one-js-helper
cd one-js-helper
npm init vitepress

步骤 2: 安装依赖

sql 复制代码

pnpm add -D eslint prettier husky lint-staged @commitlint/cli @commitlint/config-conventional

步骤3：配置tsconfig.json

json 复制代码

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "outDir": "./dist",
    "declarationMap": true,
    "sourceMap": true,
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

步骤4：配置eslint(根目录下新建.eslintrc.cjs)

css 复制代码

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  rules: {
    '@typescript-eslint/ban-ts-comment': 'off',
    quotes: ['error', 'single'],
    semi: ['warn', 'always'],
    'no-console': ['warn', { allow: ['warn', 'error'] }],
    '@typescript-eslint/no-unused-vars': 'warn',
    'prefer-const': 'error',
    eqeqeq: 'error',
    '@typescript-eslint/ban-types': [
      'error',
      {
        extendDefaults: true,
        types: {
          Function: false,
        },
      },
    ],
  },
};

步骤5：配置prettier(根目录下新建.prettierrc.cjs)

yaml 复制代码

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: true,
  arrowParens: 'avoid',
  requirePragma: false,
  proseWrap: 'preserve',
};

步骤6：配置 husky 和 lint-staged

在package.json中新增以下内容:

json 复制代码

"lint-staged": {
    "*.{ts,js}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ],
    "*.test.ts": [
      "jest --passWithNoTests"
    ]
}

然后执行npx husky install，在新建出来的.husky文件夹下新增如下2个文件:

commit-msg

bash 复制代码

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit $1

pre-commit

bash 复制代码

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

步骤7：配置 commitlint(根目录下新建commitlint.config.cjs)

ini 复制代码

module.exports = {
  extends: ['@commitlint/config-conventional']
};

正式开发

经过上述的步骤，配置已经基本完成，现在可以进入具体的功能实现了，这里以实现一个邮箱验证函数为例

将以下内容输入给chatgpt

请帮我实现一个验证邮箱的函数

1.要求使用ts实现

2.要有包含所有case的单元测试，使用jest

根据chatgpt的回答开始编码

步骤1：安装依赖

sql 复制代码

pnpm add -D typescript jest ts-jest @types/jest

步骤2：实现验证函数(新建src/validate.ts)

typescript 复制代码

export function validateEmail(email: string): boolean {
  // 此处使用简单的正则表达式进行邮箱验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

步骤3：单元测试(新建test/validate.test.ts)

scss 复制代码

import { validateEmail } from '../validateEmail';

describe('Email Validator', () => {
  test('Valid email should return true', () => {
    expect(validateEmail('test@example.com')).toBe(true);
  });

  test('Invalid email should return false', () => {
    expect(validateEmail('invalid_email')).toBe(false);
  });

  test('Email without "@" should return false', () => {
    expect(validateEmail('testexample.com')).toBe(false);
  });

  test('Email without "." should return false', () => {
    expect(validateEmail('test@examplecom')).toBe(false);
  });

  test('Email with spaces should return false', () => {
    expect(validateEmail('test @example.com')).toBe(false);
  });

  test('Empty email should return false', () => {
    expect(validateEmail('')).toBe(false);
  });
});

步骤4：设置快捷命令(package.json中新增)

json 复制代码

{
  "scripts": {
    "test": "jest"
  }
}

步骤5：根目录下新增jest.config.ts

ini 复制代码

module.exports = {
  preset: 'ts-jest'
};

然后执行pnpm test，查看结果

后续的工具的函数新增，按照上述的方式，重复进行就行了

打包

package.json中新增以下内容

json 复制代码

"files": [
  "dist",
  "README.md"
],
{
  "scripts": {
    "bundle:build": "rollup -c",
  }
}

将以下内容发送到chatgpt

我想将上述代码进行打包（使用rollup）构建，需要同时支持esModule，commonjs的方式使用，请一步一步的告诉我该怎么做

根据chagpt的回答进行配置

步骤1：安装依赖

sql 复制代码

pnpm add -D rollup @rollup/plugin-typescript rollup-plugin-terser tslib

步骤2：根目录下新增rollup.config.js

javascript 复制代码

import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.ts', // 入口文件路径
  output: [
    {
      file: 'dist/bundle.esm.js',
      format: 'es',
      sourcemap: true,
    },
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs',
      sourcemap: true,
    },
  ],
  plugins: [
    typescript(), // 使用 TypeScript 插件
    terser(), // 使用 terser 进行代码压缩
  ],
  external: [], // 将你的依赖项添加到此处，以防止它们被打包
};

步骤3：package.json新增以下内容

json 复制代码

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

然后执行pnpm bundle:build，查看打包结果

部署

部署文档到`github page`

新建.github/workflows/deploy.yml，写入以下内容，这里直接复制vitepress部署内容即可

yaml 复制代码

name: Deploy VitePress site to Pages

on:
  push:
    branches: [main]

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: pnpm/action-setup@v2
        with:
          version: 8
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Install dependencies
        run: pnpm install
      - name: Build with VitePress
        run: |
          pnpm docs:build
          touch docs/.vitepress/dist/.nojekyll
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: docs/.vitepress/dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

发布到`npm`

package.json中新增以下内容

json 复制代码

"scripts": {
   "bundle:publish": "npm publish --registry https://registry.npmjs.org"
}

将以下内容发送给chatgpt

如何将以上通过rollup打包之后的文件发布到npm，并自动更新版本新建.github/workflows/publish.yml，写入以下内容

根据chatgpt的回答，进行配置

新建.github/workflows/publish.yml，写入以下内容：

yaml 复制代码

name: Node.js Package

on:
  release:
    types: [created]
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js and pnpm
        uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm install -g pnpm
      - run: pnpm install

  publish:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js and pnpm
        uses: actions/setup-node@v3
        with:
          node-version: 20
          registry-url: https://registry.npmjs.org/
      - run: npm install -g pnpm
      - run: pnpm install
      - name: configuration Git
        run: |
          git config --global user.email "you git email" #替换你的邮箱
          git config --global user.name "you git usename" #替换你的用户名
      - name: Bump version and push to Git
        run: |
          npm version patch -m "ci: release version to %s [skip ci]"
          git push origin main
      - run: pnpm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

其中NPM_AUTH_TOKEN的配置过程如下：

步骤1：登录到npm并创建token

然后进入到该项目仓库，进入到Settings页面，将刚创建好的npm token添加到下图所示的地方

配置完成之后，当代码提交到main分支的时候，就会自动发布到npm并部署文档到github page

总结

以上就是js工具函数库的全部内容了，以上的每一步都是在chatgpt的帮助下完成的，可以看到相比于我们单独查阅文档进行配置、手写工具函数、手写单元测试等，现在我们只需要向chatgpt提交我们的需求，具体的代码，全部由chatgpt告诉我们

另外，虽然上述文章看起来实现的过程很顺利，但是实现的过程中也遇到了一些问题，有些问题直接把错误和上下文提供给chatgpt即可解决，有些错误仍然需要自己去google解决，但是整体上来说，仍然比传统的实现方式节省了很多的时间。

探索AI时代下，前端开发的新模式

前言

需求分析

开发之前

创建项目

正式开发

打包

部署

部署文档到github page

发布到npm

总结

部署文档到`github page`

发布到`npm`