搭建项目

安装core-js

npm i --save core-js 

yarn add core-js

安装rollup

rollup：打包工具，和webpack齐名

npm i --save-dev @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup  rollup-plugin-dts rollup-plugin-terser

yarn add --dev @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup  rollup-plugin-dts rollup-plugin-terser

介绍一下，这些包的用途

• @rollup/plugin-commonjs 用于将commonjs包转换为ESM模块包（建议安装）
• @rollup/plugin-node-resolve 用于解析node模块（建议安装）
• rollup 打包工具，类似webpack，不过更适用于打包库
• rollup-plugin-dts 用于打包时生成d.ts文件（建议安装，有d.ts可以更好的在ide中进行语法提示）
• rollup-plugin-terser 用于打包时压缩代码体积（如果不想压缩代码体积，可以选择不安装）

安装typescript

typescript：具备类型检查的JavaScript子集

npm i --save-dev typescript

yarn add --dev typescript

安装babel(不使用babel可以跳过)

babel：用于源代码转译，方便对低版本NODE或者浏览器环境进行兼容

npm i --save-dev @babel/core @babel/plugin-external-helpers @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript @rollup/plugin-babel
npm i --save @babel/runtime

yarn add --dev @babel/core @babel/plugin-external-helpers @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript @rollup/plugin-babel
yarn add @babel/runtime

介绍一下，这些包的用途

• @babel/runtime 用于被babel转译后的代码实现源代码同样的功能
• @babel/core babel核心库，使用babel必安装的包
• @babel/plugin-external-helpers 避免多次引入helpers
• @babel/plugin-transform-runtime 用于转译源代码至指定ES版本
• @babel/preset-env babel多环境转译预设
• @babel/preset-typescript babel转译typescript预设
• @rollup/plugin-babel 用于rollup打包时调用babel进行源代码转译

安装 eslint(不使用eslint可以跳过)

eslint：用于代码风格检查

npm i --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

yarn add --dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

介绍一下，这些包的用途

• eslint 代码风格检查工具
• @typescript-eslint/eslint-plugin typescript的eslint插件
• @typescript-eslint/parser typescript的eslint解析器

安装 prettier(不使用prettier可以跳过)

prettier：用于格式化代码

npm i --save-dev prettier eslint-config-prettier

yarn add --dev prettier eslint-config-prettier

介绍一下，这些包的用途

• prettier 代码格式化工具
• eslint-config-prettier eslint的prettier配置预设，用于避免eslint和prettier格式化代码时冲突

安装 jest(不使用jest可以跳过

jest：用于测试代码

npm i --save-dev jest ts-jest @jest/globals @types/jest

yarn add --dev jest ts-jest @jest/globals @types/jest

介绍一下，这些包的用途

• jest js代码测试工具，类似java中的junit
• ts-jest 用于在测试中将ts代码编译为js（使用tsc进行编译）
• @jest/globals 包含了Jest全局函数定义

项目配置

配置package.json

在package.json中添加以下内容

"scripts": {
    "build": "rollup -c "rollup.config.js"",
    "lint": "eslint src/**/*.{js,ts}",
    "format": "prettier --write "src/**/*.ts" "src/**/*.js"",
    "test": "jest --no-cache --config jest.config.js"
},
"type": "module",
"types": "./dist/pangju-utils.d.ts",
"exports": {
    "require": "./dist/pangju-utils.cjs",
    "default": "./dist/pangju-utils.esm.js"
},
"main": "./dist/pangju-utils.cjs",
"module": "./dist/pangju-utils.esm.js",
"unpkg": "./dist/pangju-utils.umd.js",
"files": [
    "dist"
],

配置typescript

在根目录创建ts.config.json，并添加以下内容

{
  "compilerOptions": {
    "baseUrl": ".",
    // 输出目录
    "outDir": "./dist",
    // 是否生成sourceMap
    "sourceMap": false,
    // 编译目标
    "target": "ES5",
    // 模块类型
    "module": "ES6",
    "moduleResolution": "Node",
    // 是否允许编译js文件
    "allowJs": false,
    // 严格模式
    "strict": false,
    // 未使用变量报错
    "noUnusedLocals": false,
    // 启动装饰器
    "experimentalDecorators": true,
    // 加载json
    "resolveJsonModule": true,
    // 允许export=导出，由import from 导入
    "esModuleInterop": true,
    // 允许默认导入
    "allowSyntheticDefaultImports": true,
    // 删除注释
    "removeComments": false,
    // 生成定义文件
    "declaration": true,
    // 生成定义sourceMap
    "declarationMap": false,
    // 定义文件输出目录
    "declarationDir": "./dist",
    // 导入库类型定义
    "lib": ["esnext", "dom"],
    // 导入指定类型包
    "types": []
  },
  // 排除目录
  "exclude": ["node_modules", "dist"],
  // 导入目录
  "include": [
    "src/*" 
  ]
}

配置babel

在根目录创建.babelrc，并添加以下内容

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/plugin-external-helpers",
        [
            "@babel/plugin-transform-runtime",
            {
                "useESModules": true
            }
        ]
    ]
}

配置eslint

在根目录创建.eslintrc，并添加以下内容

{
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "ban-types": "off"
    }
}

配置rollup

在根目录创建rolup.config.js，并添加以下内容

import nodeResolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import {babel} from "@rollup/plugin-babel";
import {terser} from "rollup-plugin-terser";
import dts from "rollup-plugin-dts";

import path from "path";
import pkg from "./package.json";

// 用于解析绝对路径
const resolvePath = (...args) => path.resolve(__dirname, ...args);

export default [
    // 生成 .d.ts 类型声明文件
    {
        input: resolvePath("src/index.ts"),
        output: {
            file: resolvePath("./", pkg.types),
            format: "es",
        },
        plugins: [dts()],
    },
    {
        input: resolvePath("./src/index.ts"),
        output: [
            // cjs 格式打包
            {file: resolvePath("./", pkg.main), format: "cjs"},
            // es 格式打包
            {file: resolvePath("./", pkg.module), format: "es"},
            // umd 格式打包
            {
                file: resolvePath("./", pkg.unpkg),
                format: "umd",
                name: "PangJuUtils",
                globals: {},
                plugins: []
            },
        ],
        plugins: [
            // 解析第三方模块
            nodeResolve({ modulesOnly: true, extensions: ['.js', '.ts']}),
            // 配置babel
            babel({
                exclude: "**/node_modules/**",
                babelHelpers: "runtime",
                extensions: ['.js', '.ts'],
            }),
            // commonjs模块转es6模块
            commonjs({extensions: ['.js', '.ts']}),
            // 代码压缩
            terser({
                compress: {
                    // 去除 console
                    drop_console: true,
                    pure_getters: true,
                    unsafe: true,
                    unsafe_comps: true,
                    warnings: false
                },
            }),
        ],
    },
];

配置jest

在根目录创建jest.config.js，并添加以下内容

export default {
  preset: "ts-jest",
  testEnvironment: "node",
  transform: {
    "^.+\.ts$": "ts-jest",
  },
  extensionsToTreatAsEsm: [".ts"],
  moduleFileExtensions: ["ts", "js"],
  moduleNameMapper: {
    "^src/(.*)": "<rootDir>/src/$1",
  },
  globals: {
    "ts-jest": {
      useESM: true,
      tsconfig: "tsconfig.test.json",
    },
  },
};

测试开发文件demo

import { describe, test, expect } from "@jest/globals";
import { StringUtils } from "src/util/StringUtils";

describe("StringUtils Test", () => {
  test("isEmpty Test", () => {
    expect(StringUtils.isEmpty("")).toBeTruthy();
  });
});

有不对的地方请在评论区指正，我会尽快修改