react封装组件上传到npm（webpack)

前段时间自己写了一个Tooltips组件，使用 Webpack 上传到 npm 上，同时支持 JavaScript 和 TypeScript 并使用 SCSS 进行样式处理，记录一下自己的步骤

步骤 1：初始化项目

1. 创建一个项目文件夹

mkdir my-tooltips-component
cd my-tooltips-component

2. 初始化 package.json

npm init -y

步骤 2：安装依赖

npm install react react-dom

npm install @types/react @types/react-dom --save-dev

npm install sass --save-dev

npm install --save-dev typescript webpack webpack-cli webpack-dev-server ts-loader sass-loader css-loader style-loader mini-css-extract-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader

npm install --save-dev webpack webpack-cli typescript ts-loader css-loader mini-css-extract-plugin webpack-bundle-analyzer @types/react @types/react-dom

步骤 3：配置 TypeScript

1. 创建 tsconfig.json 文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "declaration": true,
    "declarationDir": "./dist/types",
    "outDir": "./dist",
    "jsx": "react",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

步骤 4：编写组件

1. 创建 src 文件夹并编写组件代码

步骤5：配置 Webpack

1. 创建 webpack.config.js 文件

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = {
  mode: "development",
  entry: "./src/ToolTips.tsx",      // 改成自己的组件名字
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
    library: "myTooltips",
    libraryTarget: "umd",
    umdNamedDefine: true,
    globalObject: "this",
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".scss"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      openAnalyzer: false,
    }),
  ],
  externals: {
    react: "react",
    "react-dom": "react-dom",
    "react/jsx-runtime": "react/jsx-runtime",
  },
};

步骤6：构建项目

1. 添加构建脚本到 package.json

"scripts": {
  "build": "webpack --config webpack.config.js",
  "prepublishOnly": "npm run build"
}

2. 构建项目

npm run build

你也可以使用命令 npm pack 查看打包结果，会生成一个后缀为 .tgz 的文件，在npm publish之前可以先查看打包结果是否符合预期

步骤7：登录并发布到NPM

1. 更换 npm 源（如果你在使用其他源）

如果你之前使用了非官方的 npm 源，需要切换回官方源：

npm config set registry https://registry.npmjs.org/


ps:

查看源地址：npm get registry

切换回淘宝源：npm config set registry https://registry.npmmirror.com

2. 登录到 npm

登录到 npm 帐户：

npm login

按提示输入你的 npm 用户名、密码和电子邮件地址。

3. 发布包到 npm

发布包到npm

npm publish

4. 验证发布

在 npm 网站上搜索你的包名，确认你的包已经成功发布。
如果成功，你应该可以在你的 npm 主页上看到它。

---

package.json文件示例：

{
  "name": "my-react-xxxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "types": "dist/types/ToolTips.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "prepublishOnly": "npm run build"
  },
  "keywords": [],
  "author": "chenpocket",
  "license": "ISC",
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "@babel/preset-react": "^7.24.7",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "babel-loader": "^9.1.3",
    "cross-env": "^7.0.3",
    "css-loader": "^7.1.2",
    "mini-css-extract-plugin": "^2.9.0",
    "sass": "^1.77.6",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.3",
    "webpack": "^5.92.1",
    "webpack-bundle-analyzer": "^4.10.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4",
    "webpack-merge": "^6.0.1"
  }
}

"main" , "module" , "types"：指定 npm publish 发布什么文件

"files"： 可以用来指定 npm publish 需要发布哪些文件

发布过程

其实只需要一个index.js, index.css, index.d.ts文件就可以，所以我这里做了处理，我把npm run build后的dist文件夹下的 ToolTips.d.ts, index.js, main.css 文件单独拿出来

新建一个 lib文件夹，发布的时候只发布lib文件下的内容， package.json文件就变成了这样

  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "files": [
    "lib"
  ],

这样发布上去的话，引入自己组件的时候，结构会比较清晰好看

-------会变成下面这样

在执行过程中可能会报错

连接到 npm 官方注册表超时的问题可能是由于网络连接问题或防火墙设置导致的。

切换一下网络，用wifi的试一下用手机热点，（我是这样解决的）

步骤8：后续更新版本

1. 更新版本号

假设你的 package.json 文件当前版本号是 1.0.0，运行以下命令：

npm version patch

将版本号更新为 1.0.1。 

2. 构建新的包

npm run build

 3. 发布到npm

npm publish

这样可以确保每次发布到 npm 的包都有唯一的版本号，方便用户和开发者进行版本管理和追踪。