)
}

三 打包项目

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)重复的模块

　   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