NPM上传

前段事件封装了一个业务组件，在过程中遇到了很多问题，在这里记录一下。现在让我们重投开始封装一个组件并且发布，在过程中我会大致记录一下我在其中遇到的一些问题

封装并发布

1. 创建项目文件夹和初始化项目

mkdir SelectColor
cd SelectColor
npm init

// package.json
{
  "name": "your-package-name",
  "version": "1.0.0",
  "description": "A brief description of your package",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "start": "node index.js",
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yourusername/your-repo.git"
  },
  "keywords": [
    "keyword1",
    "keyword2"
  ],
  "author": "Your Name <your.email@example.com>",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/yourusername/your-repo/issues"
  },
  "homepage": "https://github.com/yourusername/your-repo#readme",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "jest": "^26.6.3"
  },
  "engines": {
    "node": ">=12.0.0"
  },
  "files": [
    "dist",
    "src",
    "README.md"
  ]
}

package.json 文件是 npm 项目的配置文件，包含了项目的元数据和依赖信息。以下是 package.json 文件中常见配置项的详细作用：

基本信息

• name：包的名称，必须是唯一的，且不能包含大写字母或特殊字符。
• version：包的版本号，遵循语义化版本规则（semver），如 1.0.0。
• description：对包的简短描述。
• keywords：关键字数组，用于描述包的功能，便于搜索。
• homepage：包的主页 URL，一般指向项目的主页或文档。
• bugs：bug 报告地址，可以是 URL 或对象，包含 url 和 email 属性。
• license：包的许可证类型，如 MIT、ISC 等。

入口和依赖

• main：包的入口文件，通常是 index.js。
• scripts：定义 npm 脚本命令，可以使用 npm run <script-name> 运行。常见脚本有 test、start、build 等。
• dependencies：运行时依赖的包列表，会在安装包时自动安装这些依赖。
• devDependencies：开发时依赖的包列表，只在开发环境中需要。
• peerDependencies：用于指定对等依赖项，这些依赖项需要由使用者安装

项目和发布相关

• repository：项目的仓库信息，可以是字符串或对象，包含 type 和 url 属性。通常是 Git 仓库的 URL。
• author：包的作者信息，通常是姓名和邮箱地址。
• contributors：包的贡献者信息，数组格式，每个贡献者包含姓名和邮箱地址。
• engines：指定包依赖的 Node.js 或 npm 版本。
• files：发布时包含的文件和文件夹列表。

其他配置

• bin：指定包的可执行文件，键为命令名，值为可执行文件路径。
• man：指定包的手册页文件路径。
• directories：用于指定项目的目录结构，如 lib、bin、doc 等。
• config：配置项对象，供包的运行时使用。
• browser：指定包在浏览器环境中的入口文件。

2. 安装所需依赖

本次发布的 npm 包使用 vite + react + antd + ts，运行以下命令

npm install react@17 react-dom@17 antd@5
npm install --save-dev vite
npm install --save-dev typescript @types/react @types/react-dom @types/node @vitejs/plugin-react

添加配置文件 vite.config.ts 和 tsconfig.json，内容初步为下

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  },
  build: {
    outDir: 'dist'
  }
});

// tsconfig.json
{

  "compilerOptions": {

    "target": "ESNext", // 指定要使用的JavaScript语言版本

    "module": "ESNext", // 指定要使用的模块系统

    "jsx": "react-jsx", // 指定 JSX 代码的编译方式

    "strict": true, // 启用所有严格类型检查选项

    "moduleResolution": "node", // 使用Node.js模块解析策略

    "esModuleInterop": true, // 启用esModuleInterop，以便与CommonJS模块更好地兼容

    "skipLibCheck": true, // 跳过对库文件的类型检查

    "forceConsistentCasingInFileNames": true, // 强制文件名一致的大小写

    "isolatedModules": true, // 启用孤立的模块编译

    "resolveJsonModule": true, // 允许导入JSON文件

    "allowSyntheticDefaultImports": true // 允许从没有默认导出的模块中进行默认导入

  },

  "include": ["src"], // 包含的文件夹或文件

  "exclude": ["node_modules", "dist"] // 排除的文件夹或文件

}

补充目录结构

SelectColor/
├── public/
│   └── index.html
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── package.json
├── tsconfig.json
└── vite.config.ts