如何用 rollup 打包并发布到 npm

npmjs 上有很多的包，插件可以让我们下载使用，那别人是怎么把自己的代码上传上去的呢？如果我们也想把自己的代码传上去要怎么做呢？

比如，我也做了一个组件库，叫 hx-gulu-ui, 我也想把我的源代码传到 npm 上让别人可以下载使用

第一步：在源代码文件上新建一个index.ts文件

比如我的源代码文件在 src/lib 里
先把所有的组件导出到 index.ts
示例：

ts 复制代码

// src/lib/index.ts
// 把所有的插件源文件导出
export { default as HxSwitch } from './HxSwitch.vue';
export { default as HxButton } from './HxButton.vue';
export { default as HxDialog } from './HxDialog.vue';
export { default as HxTabs } from './tabs/HxTabs.vue';
export { default as HxTab } from './tabs/HxTab.vue';
export { default as HxCascader } from './cascader/HxCascader.vue';
export { default as CascaderPanel } from './cascader/CascaderPanel.vue';
export { default as HxContainer } from './container/HxContainer.vue';
export { default as HxHeader } from './container/HxHeader.vue';
export { default as HxMain } from './container/HxMain.vue';
export { default as HxFooter } from './container/HxFooter.vue';
export { default as HxAside } from './container/HxAside.vue';
export { default as hxMessageBox } from './hxMessageBox/module.vue';
import HxMessageBox from "./hxMessageBox/index"
export { HxMessageBox }

export { openDialog as openDialog } from './openDialog'

第二步：在根目录上创建 rollup.config.js 文件

备注里的依赖记得安装

js 复制代码

// 请先安装 rollup-plugin-esbuild @vitejs/plugin-vue rollup-plugin-scss sass rollup-plugin-terser
import esbuild from 'rollup-plugin-esbuild'
import vue from '@vitejs/plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser"

export default {
  input: 'src/lib/index.ts',
  output: [{
    globals: {
      vue: 'Vue'
    },
    name: 'Hxui',
    file: 'dist/lib/hxui.js',
    format: 'umd',
    plugins: [terser()]
  }, {
    name: 'Hxui',
    file: 'dist/lib/hxui.esm.js',
    format: 'es',
    plugins: [terser()]
  }],
  plugins: [
    scss({ include: /\.scss$/, sass: dartSass }),
    esbuild({
      include: /\.[jt]s$/,
      minify: process.env.NODE_ENV === 'production',
      target: 'es2015' 
    }),
    vue({
      include: /\.vue$/,
    })
  ],
}

第三步：对比一下我的 package.json

name 记得改

perl 复制代码

{
  "name": "hx-gule-ui",
  "version": "0.0.1",
  "type": "module",
  "files": ["dist/lib/*"],
  "main": "dist/lib/hxui.js",
  "module": "dist/lib/hxui.esm.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development vite --mode development",
    "build": "cross-env NODE_ENV=production vite build --mode production",
    "preview": "vite preview"
  },
  "resolutions": {
    "node-sass": "npm:sass@^1.26.11"
  },
  "dependencies": {
    "github-markdown-css": "5.3.0",
    "prismjs": "1.29.0",
    "vue": "^3.3.4",
    "vue-router": "4.0.0-beta.3"
  },
  "devDependencies": {
    "@types/node": "20.8.7",
    "@vitejs/plugin-vue": "^4.2.3",
    "cross-env": "7.0.3",
    "marked": "9.1.2",
    "sass": "1.69.2",
    "vite": "^4.4.5",
    "rollup-plugin-esbuild": "4.9.3",
    "rollup-plugin-scss": "3.0.0",
    "rollup-plugin-terser": "7.0.2"
  }
}

第四步：运行 rollup -c 命令

rollup -c 打包命令
会在 dist 文件夹里面生成一个 lib 文件夹( 如果还没有 dist 文件夹，先 build 一下代码 )
里面有js文件， esm.js文件， css文件

第五步：在package.json 里面

添加 files 和 main 字段（如上面第三步附的 package.json文件一样）

第六步：请确保你在没有使用淘宝源的情况下使用，使用官方源

两种方法

第一种
- npm config get registry 查看当前源, 如果不是 https://registry.npmjs.org 就说明不是官方源
- npm config set registry https://registry.npmjs.org 却换成官方源
- npm config set registry https://registry.npmmirror.com/ 切回淘宝源
第二种

使用 nrm 查看
- 安装：npm i -g nrm
- nrm ls 查看当前源
- nrm use npm 切换官方源
- nrm use taobao 切换淘宝源

第七步：注册 npmjs官网的账号

注册完后在vscode终端登录

登录：npm login
等一会儿会跳出 npmjs 官网，会给你的邮箱发送一次性验证码，输入验证成功后切回 vscode 就行了
退出：npm logout

第八步：发布

发布你的源代码

npm publish
每一次重新发布，都必须更改package.json 里面的版本号

查看是否发布成功

可以登录 npmjs 官网，点击你的头像，package 导航，里面就是你发布的包
发布成功后会给你的邮箱发送一封发布成功的邮件
npm info hx-gulu-ui versions(hx-gulu-ui换成你自己的包名)，查看你的插件有哪些版本，最好是切换成官方源后查看，淘宝源我测试有时候可能会有一会儿延迟

总结：至此就已经可以在 npm 上成功发布我们自己的插件包啦，快去试试吧

如何用 rollup 打包 并发布到 npm

第一步： 在源代码文件上新建一个index.ts文件

第二步： 在根目录上创建 rollup.config.js 文件