[JavaScript知识库]utils公共组件独立开发

参考网址

由于github有时候不太稳定，直接点击可能进不去，可以进入git 搜索查找antfu/utils进行查看。这里记录了如何将公共的utils的js/ts的方法提取单独的组件。如何搭建整个框架，写前端的测试用例。

应用的主要技术: Js Ts Jest

注意:本应用 安装的插件均安装在devDependencies中，devDependencies用于本地环境开发 dependencies用于用户发布环境 安装决定了它的位置–save-dev /save

搭建框架过程

相关插件

//以下插件需要自己安装
"devDependencies": {
  tsup        // 打包TypeScript库，由esbuild提供支持
  prettier    /*个流行的代码格式化工具的名称，它能够解析代码，
              使用你自己设定的规则来重新打印出格式规范的代码*/
  ts-jest     // 前端代码的测试框架
  jest
  @types/jest
  typescript
}

//相关配置  files字段是一个被项目包含的文件名数组，如果你在里面放一个文件夹名，
那么这个文件夹中的所有文件都会被包含进项目中(除非是那些在其他规则中被忽略的文件)。
你还可以在包的根目录或子目录下提供一个'.npmignore'文件忽略项目包含文件，
即使这些文件被包含在files字段中.npmignore文件和.gitignore功能相同

//表示代码包下载安装完成时包括的所有文件。

"files": [
  "dist",
  "README.md",
  "CHANGELOG.md"
]


//package.json
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts",
    "test": "jest",
    "check": "prettier --check --plugin-search-dir=. ./src",
    "format": "prettier --write --plugin-search-dir=. ./src"
  }

相关配置

//.prettier
{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "es5",
	"printWidth": 90,
	"semi": true,
	"tabWidth": 4,
	"endOfLine": "auto"
}

//jest.config.js
module.exports = {
    roots: [
        '<rootDir>',
    ],
    testMatch: [
        '**/__tests__/**/*.+(ts|tsx|js)',
        '**/?(*.)+(spec|test).+(ts|tsx|js)',
    ],
    transform: {
        '^.+\\.(ts|tsx)$': 'ts-jest',
    },
}

//tsconfig.json
{
    "compilerOptions": {
        "target": "es2018",
        "module": "esnext",
        "lib": [
            "esnext",
            "DOM"
        ],
        "moduleResolution": "node",
        "esModuleInterop": true,
        "strict": true,
        "strictNullChecks": true,
        "resolveJsonModule": true,
    }
}

忽略文件配置

//.gitignore
# Dependency directories
node_modules/
/dist/

//.prettierignore
dist/**
node_modules/**
.routify/**

如果有问题可以留言偶！！！职场生活愿你被温柔对待！愿我们共同进步