rollup打包vue组件并发布到npm的方法

个人认为rollup在打包组件的实现方式比用webpack方便，webpack应该是比较适合打包大型的工程项目，而rollup适合打包一些平时在项目中的组件

rollup中文文档：简介 | rollup.js 中文文档 | rollup.js中文网 (rollupjs.com)

这次打包一个滚动加载更多的组件，因为平时用vant是vant-list 会遇到一些问题，例如滚动到底部没有触发加载更多逻辑。

首先在项目根目录安装rollup

npm i rollup -D

安装一些rollup常用到的plugins

基本的工程化插件

• @rollup/plugin-node-resolve 帮助 rollup 识别外部模块

• @rollup/plugin-babel   babel插件 将es6+转为es5

• rollup-plugin-copy  直接复制静态文件

• @rollup/plugin-terser 压缩代码

• @rollup/plugin-commonjs 将commonjs模块转为es模块

• @rollup/plugin-typescript  typescript插件

• @rollup/plugin-alias 路径别名

npm i @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-terser rollup-plugin-vue @rollup/plugin-typescript @babel/core - D

处理Vue文件

rollup-plugin-vue 

用于处理.vue文件。vue2和vue3项目所用的rollup-plugin-vue版本不一样，vue的编译器也不一样。

• vue2：rollup-plugin-vue^5.1.9 + vue-template-compiler

• vue3：rollup-plugin-vue^6.0.0 + @vue/compiler-sfc

npm i vue-template-compiler @vue/compiler-sfc -D

vue2和vue3版本的plugins可以这样在devDependencies中指定,，然后npm install

"devDependencies":{
   "rollup-plugin-vue2": "npm:rollup-plugin-vue@^5.1.9",
   "rollup-plugin-vue3": "npm:rollup-plugin-vue@^6.0.0",
}

打包CSS插件

rollup-plugin-postcss 识别css和预处理文件 （如果css，rollup-plugin-postcss需要配合sass使用）

这里我以分别vue2和vue3各创建一个rollup.config.js

vue2-----rollup.vue2.config.js，配置如下

import resolve from '@rollup/plugin-node-resolve';
import vue2 from 'rollup-plugin-vue2';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss'
import typescript from "@rollup/plugin-typescript";
export default {
   input: 'src/index.ts',
   output: {
       globals: {
           vue: "Vue"
       }
   },
   plugins: [
       resolve(),
       typescript(),
       terser(),
       json(),
       vue2({
           css: true,
           compilerTemplate: true,
           preprocessStyles: true
       }),
       babel({
           exclude: "**/node_modules/**"
       }),
       commonjs(),
       postcss()
   ]
}

vue3-----rollup.vue3.config.js，配置如下

import resolve from '@rollup/plugin-node-resolve';
import vue3 from 'rollup-plugin-vue3';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss'
import typescript from '@rollup/plugin-typescript';
export default {
   input: 'src/index.ts',
   output: {
       globals: {
           vue: "Vue"
       }
   },
   plugins: [
       resolve(),
       typescript(),
       terser(),
       json(),
       vue3({
           css: true,
           compilerTemplate: true,
           preprocessStyles: true
       }),
       babel({
           exclude: "**/node_modules/**"
       }),
       commonjs(),
       postcss()
   ]
}

配置打包命令，这里我把cjs、umd、es、iife都分别打包出来了

"scripts": {
   "build": "npm run build:vue3 && npm run build:vue2",
   "build:vue2": "rimraf dist/vue2/* && npm run build:umdvue2 && npm run build:esvue2 && npm run build:unpkgvue2 && npm run build:cjsvue2",
   "build:umdvue2": "rollup -c rollup.vue2.config.js --format umd --name mList --file dist/vue2/index.umd.js",
   "build:esvue2": "rollup -c rollup.vue2.config.js --format es --file dist/vue2/index.esm.js",
   "build:unpkgvue2": "rollup -c rollup.vue2.config.js --format iife --file dist/vue2/index.min.js",
   "build:cjsvue2": "rollup -c rollup.vue2.config.js --format cjs --file dist/vue2/index.cjs.js",
   "build:vue3": "rimraf dist/vue3/* && npm run build:umdvue3 && npm run build:esvue3 && npm run build:unpkgvue3 && npm run build:cjsvue3",
   "build:umdvue3": "rollup -c rollup.vue3.config.js --format umd --name mList --file dist/vue3/index.umd.js",
   "build:esvue3": "rollup -c rollup.vue3.config.js --format es --file dist/vue3/index.esm.js",
   "build:unpkgvue3": "rollup -c rollup.vue3.config.js --format iife --file dist/vue3/index.min.js",
   "build:cjsvue3": "rollup -c rollup.vue3.config.js --format cjs --file dist/vue3/index.cjs.js"
 },

 打包后的文件

 然后可以发布到npm

npm地址：hfex-list - npm (npmjs.com)

github地址：UzumakiHan/hfex-list: 下拉加载更多组件 (github.com)

来源：https://blog.csdn.net/Hhjian524/article/details/130816796