从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” //main属性是告诉别人这个包的最终文件是在dist/index.js里面　　

　　完善包的其他信息

二、创建包的内容代码

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

这里要安装下自己引用的第三方包antd,npm -i antd react -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 -D OR yarn add webpack webpack-cli babel -D

2 新建 webpack.config.js 文件

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname + '/dist',
        filename: "bundle.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

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

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

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

五.发布模块包

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