在material-ui基础上分装自己的组件库并发布到npm

一. webpack构建项目，创建一个项目文件，文件结构如下

package.json

注意：所有依赖都安装在 devDependencies中；

这里有用到peerDependencies，这里的意思是避免重复依赖，比如@material-ui/core在我的组件库被引入一次，在使用项目中又会再次被引入，避免两次安装冗余，以及两个版本差异带来的分险，所以用到了peerDependencies，具体左右可百度。

{
  "name": "test-library-hybird-libs",
  "version": "1.0.5",
  "description": "",
　　//包的入口地址
  "main": "dist/src/widget/index.js",
  "files": [
    "dist"
  ],
  "keywords": [],
  "author": "",
  "license": "MIT",
  "private": false,
  //仓库地址
  "repository": {
    "type": "git",
    "url": "https://www.npmjs.com/package/test-library-hybird-libs"
  },
  //包的主页url
  "homepage": "https://www.npmjs.com/package/test-library-hybird-libs",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.config.js",
    "dev": "webpack-dev-server --config webpack.dev.config.js",
    "build": "rimraf ./dist & rimraf ./dist.zip && md dist && webpack --config webpack.prod.config.js "
  },
  "dependencies": {
  },
  "devDependencies": {
    "@babel/core": "7.15.8",
    "@babel/plugin-transform-runtime": "7.16.0",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.16.0",
    "@babel/runtime": "7.16.0",
    "babel-loader": "8.2.2",
    "css-loader": "0.28.9",
    "eslint-config-airbnb-base": "14.2.1",
    "eslint-plugin-eslint-plugin": "3.6.1",
    "file-loader": "6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "prop-types": "15.7.2",
    "style-loader": "0.19.1",
    "webpack": "5.58.1",
    "webpack-cli": "4.9.0",
    "webpack-dev-server": "^4.5.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "copy-webpack-plugin": "^4.6.0",
    "@date-io/moment": "1.3.13",
    "@material-ui/core": "4.12.2",
    "@material-ui/data-grid": "4.0.0-alpha.37",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.60",
    "@material-ui/pickers": "3.3.10",
    "@material-ui/styles": "4.11.4",
    "@material-ui/system": "4.12.1",
    "@mui/x-data-grid": "4.0.0",
    "@mui/x-data-grid-pro": "4.0.0"
  },
  "peerDependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "@date-io/moment": "1.3.13",
    "@material-ui/core": "4.12.2",
    "@material-ui/data-grid": "4.0.0-alpha.37",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.60",
    "@material-ui/pickers": "3.3.10",
    "@material-ui/styles": "4.11.4",
    "@material-ui/system": "4.12.1",
    "@mui/x-data-grid": "4.0.0",
    "@mui/x-data-grid-pro": "4.0.0"
  }
}

　　webpack.prod.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: 'production',
　// 配置 entry 属性，即构建时的入口。例如：此时组件入口是widget下的index.js。
  entry: {
    main: './src/widget/index.js',
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist',
    filename: 'build.js',
    // 配置 library 和 libraryTarget 属性
    library: 'test-library-hybird-libs',
    libraryTarget: 'umd', 
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(woff|woff2|ttf|eot|ico)$/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, './src'),
        to: path.resolve(__dirname, './dist/src'),
      },
    ]),
  ],
};

　　

 二.编写组件

widget/index.js

import Checkbox from './Checkbox';

export { Checkbox };

widget/Checkbox.js　

import React from 'react';
import { Checkbox as HACheckbox } from '@material-ui/core';
import PropTypes from 'prop-types';
import checkoutStyles from './style';
import theme from '../../themes/theme';

const CheckBox = ({ className, ...props }) => {
  const classes = checkoutStyles(props);
  return <HACheckbox
    className = {`${classes.checkboxRoot} ${className}`}
    inputProps={{"aria-label":'checkbox'}}
    checked={props.checked}
    onChange={props.onChange}
    color={['default','info','secondary','warning'].indexOf(props.color)>-1?props.color:'default'}
  />
};

CheckBox.propTypes = {
  /**
   * Checkbox color
   */
  color: PropTypes.oneOf(Object.keys(theme.themeColorList)),
  /**
   * Checkbox width
   */
  width: PropTypes.number,
  /**
   * Optional checked
   */
  checked: PropTypes.bool,
  /**
   * Optional default Checked
   */
  defaultChecked: PropTypes.bool,
  /**
   * class Name
   */
  className: PropTypes.string,
  /**
   * Optional change handler
   */
  onChange: PropTypes.func,
};

CheckBox.defaultProps = {
  defaultChecked: false,
  checked: false,
  color: 'default',
};

export default CheckBox;

　　widget/style.js

import { makeStyles } from '@material-ui/core/styles';

const checkoutStyles = makeStyles((theme) => ({
  checkboxRoot: {
    padding: '2px',
    '@global': {
      '.MuiSvgIcon-root': {
        fill: (props) => theme.themeColorList[props.color] || theme.themeColorList.Primary,
        width: (props) => props.width || '20px',
        height: (props) => props.width || '20px'
      }
    }
  }
}));

export default checkoutStyles;

　　

三.安装依赖并打包组件

npm  i
npm run build

四. 本地模拟发布

打包完成后，继续在组件源码根目录下，执行命令：

npm pack

　　命令执行后，会在根目录下生成一下.tgz包，然后在需要引入组件的项目中执行以下命令：npm install 本地包路径，本地包路径为刚才生成的.tgz包路径，注意命令中斜杠方向！！！

 

 

 安装后，package中会出现一条依赖，但本条记录会显示文件路径，因为是本地模拟安装的。

到这一步就可以直接测试组件

 

五.发布组件到npm

 　　1. 注册npm账号，这里不多说了

　　 2. 切换到需要发包的项目根目录下，登录npm账号，输入用户名、密码、邮箱

npm login //登录

npm publish //发布

　　每次发布到npm上需要更改版本号，即package.json 里的 version 字段不可与已发布的包版本号相同

　　3.安装组件 

npm install 组件名称

　　

 六，使用组件

import { MuiThemeProvider, CssBaseline } from '@material-ui/core';
import {CheckBox} from 'test-library-hybird-libs';
import theme from './themes/theme';
import GlobalStyles from './themes/GlobalStyles';

function App() {
  console.log(CheckBox)
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <GlobalStyles />
      test
      <CheckBox color="Primary" checked/> 
    </MuiThemeProvider>
  );
}

export default App;