搭建TS+ESlint9+Rollup 开发环境和踩坑之旅

打算做个埋点工具，调研了一下，这种小工具rollup 比较适合
项目预期实现：

兼容Vue2/Vue3 的埋点工具
支持Typescript
Prettier 代码格式化，ESlint 校验
发包前自动升级版本并构建
...

一、文件基本结构

image.png

二、初始化Typescript 环境

pnpm add typescript -D
// 生成 tsconfig.json 文件
tsc --init

修改 tsconfig 文件，使其生成声明文件和编译为ES模块等

{
  "compilerOptions": {
    "baseUrl": "./",
    "sourceMap": false, // 是否生成sourceMap
    "target": "es2016", // 编译目标
    "module": "esnext", // 模块类型
    "moduleResolution": "node",
    "allowJs": false, // 是否编辑js文件
    "strict": true, // 严格模式
    "noUnusedLocals": true, // 未使用变量报错
    "experimentalDecorators": true, // 启动装饰器
    "resolveJsonModule": true, // 加载json
    "esModuleInterop": true,
    "removeComments": false, // 删除注释

    "declaration": true, // 生成定义文件
    "declarationMap": false, // 生成定义sourceMap
    "declarationDir": "./lib/types", // 定义文件输出目录

  },
  "include": [
    "packages/*" // 导入目录
  ]
}

如果遇到 - @rollup/plugin-typescript: Could not find module 'tslib',

pnpm add tslib

三、安装rollup 环境

pnpm add rollup -D
pnpm add @rollup/plugin-typescript -D // 处理 TypeScript 文件
pnpm add @rollup/plugin-node-resolve -D // 解析 Node.js 模块
pnpm add @rollup/plugin-commonjs -D // 使用 CommonJS 模块

3.1 配置rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';
export default [
  {
    input: './packages/index.ts',
    output: {
      dir: './lib',
      format: 'cjs',
      entryFileNames: '[name].cjs.js',
    },
    plugins: [
        resolve(), 
        commonjs(),
        typescript({
            tsconfig: './tsconfig.json', // 当设置为false时，忽略配置文件中指定的任何选项。如果设置为与文件路径对应的字符串，则指定的文件将被用作配置文件。
        }),
    ],
  }
];

3.2 修改 scripts

修改 package.json 文件中，为了使用快捷指令，以及调用 rollup 作为开发的预览功能，需要配置 scripts 字段如下：

 "scripts": {
    "dev": "pnpm run lint && rollup -w -c",
    "build": "rollup -c",
...
  },

如此，我们便可以通过 pnpm dev，就能在开发的时候实时编译。

如果需要打包，则先执行 pnpm build 命令即可完成打包

四、 Eslint 配置

先安装 eslint 开发环境依赖

pnpm  add eslint -D

4.1 更改配置文件 eslint.config.js

import js from "@eslint/js";
import globals from "globals"; // 全局变量 window, document, navigator, 等
import tsEslint from "@typescript-eslint/eslint-plugin";
import tsEslintParser from "@typescript-eslint/parser";
import eslintConfigPrettier from 'eslint-config-prettier';

export default [
    js.configs.recommended,
    {
        ignores: ["node_modules/**", "dist/**",'lib/**', ".history/**"],
    },
    {
        files: ["**/*.{ts,tsx}"],
        languageOptions: {
            globals: {
                ...globals.browser, // 包含浏览器环境的全局变量
                ...globals.node, // 包含 Node.js 环境的全局变量
            },
            parser: tsEslintParser,
            sourceType: "module",
        },
        plugins: {
            "@typescript-eslint": tsEslint,
        },
        rules: {
            ...tsEslint.configs.recommended.rules,
        },
    },
    eslintConfigPrettier, // 禁用与 Prettier 冲突的规则
];

五、Prettier 代码自动格式化

安装 prettier

pnpm add prettier -D

然后新建一个 .prettierrc.json 的配置文件，内容如下：

{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "all",
    "arrowParens": "always",
    "endOfLine": "lf"
  }

总结

梳理了在初始化构建一个工程项目中需要做的事情，涉及打包构建、开发、Git、发包的内容，从 0 到 1 愉快地完成了项目的初始化，后续就可以更加愉快地开发了。

TODO:

打包输出不同模块
版本管理
等等