Rollup实现npm包开发及发布

一、npm包开发

详细开发内容省略

此处只重点介绍注意事项

npm包不允许将react、react-dom等基础的第三方库打进包内，否则会影响项目安装依赖包，那如何才能不让react、react-dom等基础的第三方库打进包内呢？

方案一：

（1）package.json中将react、react-dom等基础的第三方库依赖不要写入dependencies中，而是像下面一样写入peerDependencies中

"peerDependencies": {
    "@types/node": "^20.4.8",
    "@types/react": "^18.2.14",
    "postcss": "^8.4.27",
    "react": "^18.2.0",
    "rn-vconsole-panel": "^1.0.3",
    "tslib": "^2.6.0",
    "typescript": "^5.1.3"
}

（2）安装npm-install-peers插件

npm install --save-dev npm-install-peers

（3）package.json中添加下面的脚本

scripts: {
 "install-peers": "npm-install-peers"
}

（4）执行对应脚本即可自动下载peer依赖

npm run install-peers

二、rollup配置

示例如下：

import { RollupOptions } from 'rollup';
import typescript from '@rollup/plugin-typescript';
import replace from '@rollup/plugin-replace';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
​
const config: RollupOptions = {
  input: 'src/web/index.tsx',
  output: {
    exports: 'named',
    file: `dist/monitorsdk-web${process.env.__buildVersion == '1' ? '' : '-light'}.js`,
    format: 'cjs',
  },
  plugins: [
    replace({
      preventAssignment: true,
      'process.env.__buildVersion': process.env.__buildVersion,
    }),
    image(),
    postcss(),
    typescript(),
  ],
};
​
export default config;

三、本地测试npm包

方案一：安装本地npm包

（1）打开npm插件项目，执行npm run build，对插件进行打包

（2）打开业务项目，进入项目根目录，执行npm install 本地npm包地址，例如：

yarn add /Users/anrui/Documents/Gitlab/monitorSDK

（3）如插件有修改，则循环执行1、2步骤

方案二：npm link方法

网上有详细教程，此处不细说

四、发布npm包

插件开发完成后，发布流程操作如下：

（1）执行打包操作

npm build （具体的打包命令以你自己的项目package.json里的配置为准！）

（2）npm平台创建账号，www.npmjs.com/

（3）进入插件项目根目录下，执行

npm login

根据提示依次输入用户名、密码、邮箱和验证码之后即可顺利登录

如果出现下图报错

则代表你的npm源设置错了，需要将npm源切换至registry.npmjs.org/，执行

npm config set registry https://registry.npmjs.org/

切换成功后，再次执行npm login即可顺利登陆了

（4）执行发布命令

对于私有包和无作用域的包，执行 npm publish
​
对于作用域公共包，执行 npm publish --access public

执行成功如下图

（5）检查是否发布成功

登陆npm平台，搜索包名，检查最新的发布时间及版本号