从0开始用webpack开发antd,react组件库npm包并发布

 

 一、初始化一个npm包

　　1.新建一个文件夹（名称随意,建议和报名一致），输入命令 ：npm init -y

       会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-table为例)：

{
  "name": "scroll-antd-table",//包的名称用于别人 npm install xxxx的时候使用
  "version": "1.0.0",//包的版本号
  "description": "",//包的描述信息
  "main": "index.js",//包的主入口文件,默认index.js根据自己的实际情况修改，下文会讲到
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [], //关键词，有助于别人在npm search的时候找到这个包
  "author": "",//作者信息
  "license": "ISC",//许可证类型，表明使用权利和限制
}

　　2，修改package.json文件

  "main": "dist/index.js",
  "scripts": {
    "build": "webpack"
  },

 

　　完善包的其他信息

二、创建包的内容代码

   新建一个index.js文件输入要做的组件的内容(scroll-antd-table示例仅供参考)

  这里要安装下自己引用的第三方包antd,npm -i antd react react-dom -D

import React from "react"
import { Table } from "antd"

export default function (props) {
  return (
    <div >
      <Table {...props} />
    </div>
  )
}

 

三 打包项目

  1 安装webpack和babel    npm i webpack webpack-cli babel babel-loader @babel/core @babel/preset-env  @babel/preset-react -D   

  2  新建 webpack.config.js 文件

const path = require('path')

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname + '/dist',
        filename: "main.js",
        libraryTarget: "umd",
        library: 'scroll-antd-table',
    },
    externals: {
        'react': 'react',
        'react-dom': 'react-dom',
        'antd': 'antd'
    },
    mode: "production",
    module: {
        rules: [
            {
                test: /(\.js|\.jsx)$/,
                use: {
                    loader: 'babel-loader'
                },
                exclude: '/node-modules/'
            }
        ]
    },
}

 3 新建 .babelrc 文件

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

4 执行 npm run build  生成打包的 dist/bundle.js 文件

四.本地测试

　　开发完成想要需要现在本地验证一下怎们操作呢?

　1. 在npm包项目目录下执行npm link  ,这样npm 模块项目就会注册在在本地全局中了

　2. 新建一个验证项目可以用create-react-app, 创建好后,执行 npm link 包名 (模块package.json 中的name)

    3. 如果这样就启动项目的话会报如下的错误(如果模块中引用了react )

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app

  这是因为在验证项目中和在模块包中都引用了react 导致了 3. You might have more than one copy of React in the same app

  解决办法是

　　1.在验证项目的目录下 执行   cd node_modules/react && npm link  或 cd node_modules/react ; npm link

　　2.在模块包项目目录下执行    npm link react

　　3.重新启动下验证项目即可

　 解除关联引用可以使用 npm unlink  [包名]

五.发布模块包

　　1.  登录 npm官网 注册账户 ,顺便搜一搜有没有和你的包名(package.json中的name)重复的模块

 

 

　   2.  在npm模块包目录下运行 npm login 依次输入用户名,密码和邮箱

　   3.  执行 npm publish

　　　注意:必需用 npm的原始镜像 如果修改过,要改一下 npm config set registry https://registry.npmjs.org/

       4. 发布成功后到官网上搜索就能看到自己的项目了,

　　    在其他项目中 npm -i 包名 -S  就能成功引用使用了

     六 升级和删除

　　1.升级更新包

　　   1.1修改好代码内容后重新 npm  run build 打包项目

　　   1.2  执行 npm version patch 更新包的版本(package.json 文件中的version 会自动增加,也可以手动修改)

 　　   1.3  执行  npm publish

　　   2.删除npm 包

           1.1  删除指定版本 npm unpublish 包名@版本号

　　 　1.2  彻底删除整个包 npm unpublish 包名 --force