封装一个基于 React 的 npm 包

1.创建项目

mkdir my_components
cd my_components
npm init

2.配置 webpack

2.1 安装 webpack 和相关打包依赖

npm install webpack webpack-cli --save-dev
npm install clean-webpack-plugin --save-dev
npm install babel-loader --save-dev
npm install ts-loader --save-dev
npm install style-loader css-loader less-loader  --save-dev

2.2 添加 webpack 配置

在根目录创建 webpack.config.js 文件

const path = require('path');
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'myComponents.min.js',
    path: path.resolve(__dirname, 'dist'),    
    library: 'package', // 导出变量名
    libraryTarget: 'umd', 
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.(tsx|ts)?$/,
        exclude: /node_modules/,
        use: ["babel-loader", "ts-loader"],      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.less$/,
        loader: ["style-loader", "css-loader", "less-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
}

3.其它相关配置文件

3.1 tsconfig.json

在根目录创建一个 tsconfig.json 文件

{
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs",
    "sourceMap": true,
    "target": "es5",
    "declaration": true, // 将生成.d.ts文件
    "outDir": "./dist",
    "lib": [
      "es5",
      "dom",
      "es2015.promise"
    ],
  },
  "exclude": [
    "./dist"
  ],
}

3.2 package.json

{
  ...
  "name": "my_components",
  "version": "1.0.0",
  "main": "myComponents.min.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    ...
    "build": "webpack"
  }
 ...
}

3.3 .gitignore

在根目录创建 .gitignore 文件

/node_modules
yarn
.lock

3.4 .npmignore

在根目录下创建 .npmignore 文件

webpack.config.js
/dist/.txt

4.创建 React 组件

4.1 安装依赖

npm install react --save-dev

4.2 创建 src 文件夹

在根目录下创建 src 文件夹，储存代码资源，结构如下

|—— src
    |—— components //存放组件
    |       |—— my_button
    |       |      |
    |       |      |—— index.tsx
    |       |      |__ style.less    
    |       |
    |       |__ index.ts 
    |
    |—— index.js

4.3 各个文件的内容如下

src/components/my_button/index.tsx

import React, { useState } from "react";
import './style.less';

interface IState {
  value: string;
}
interface IProps {}

const MyButton: React.ForwardRefRenderFunction<HTMLSpanElement, IProps> = (  props) => {
  const [state, setState] = useState<IState>({ value: "hello" });  
  return (
    <button className="my-button" onClick={() => alert(state.value)}>确定</button>
  );
};
export default MyButton;

src/components/myButton/style.less

.my-button {
  color: red;
}

src/components/index.ts

export { default as MyButton } from "./my_button";

src/index.js

module.exports = require("./components");

5.发布

5.1 注册一个 npm 账号

www.npmjs.com

5.2 登录 npm

npm login //执行后需要填入账号密码等相关信息，只需登录一次

5.3 打包

npm run build

5.4 发布 npm 包

npm publish

5.5 下架 npm 包

npm unpublish