今天小编给大家分享一下rollup3.x+vue2打包组件如何实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
包的依赖关系
转换css 需要使用rollup-plugin-postcss 插件 --> 需要安装 postcss
vue 和 vue-template-compiler 的版本需要一致， 这里是vue 2.7;
vue2: 使用rollup-plugin-vue @5.x版本
rollup3.x + vue3版本需要使用 rollup-plugin-vue @6.x版本 + @vue/compiler-sfc
jsx的支持就需要下面2个包； 这2个包需要传递给 babel， 因此需要安装 @rollup/plugin-babel （这里版本说明在下面）
@vue/babel-helper-vue-jsx-merge-props ^1.4.0
@vue/babel-preset-jsx ^1.4.0
@rollup/plugin-babel 版本说明
5.2.1 配置babel的写法
rollup.config.js
import { defineConfig } from 'rollup'
import vue from 'rollup-plugin-vue'
import { cleandir } from 'rollup-plugin-cleandir'
import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss'
export default defineConfig({
input: './src/index.js',
output: [
{
file: 'lib/index.esm.js',
format: 'esm',
exports: 'named'
},
{
file: 'lib/index.umd.js',
format: 'umd',
name: 'w'
}
],
plugins: [
cleandir('lib'),
vue({}),
babel({
exclude: 'node_modules/**',
presets: ['@vue/babel-preset-jsx'],
// bundled-需要显示指明babelHelpers 配置， 没配置，控制台有一些warning
babelHelpers: 'bundled',
// 5.2.1 是可以不用配置 extensions
// 5.2.2 以后 需要将 vue配置进去
// extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],
}),
// 需要处理vue中的css
postcss()
],
external: [
"Vue"
]
})6.0.3 配置jsx的写法
@rollup/plugin-babel 6.x 版本也可以用上面的语法，主要就是 extensions 中有 .vue
rollup.config.js
import { defineConfig } from 'rollup'
import vue from 'rollup-plugin-vue'
import { cleandir } from 'rollup-plugin-cleandir'
import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss'
export default defineConfig({
input: './src/index.js',
output: [
{
file: 'lib/index.esm.js',
format: 'esm',
exports: 'named'
},
{
file: 'lib/index.umd.js',
format: 'umd',
name: 'w'
}
],
plugins: [
cleandir('lib'),
vue({
}),
babel({
// @rollup/plugin-babel 6.0.3 如果使用 filter 就注释掉 exclude - 互斥的
// exclude: 'node_modules/**',
presets: ['@vue/babel-preset-jsx'],
// 需要显示指明babelHelpers 配置， 没配置，控制台有一些warning
babelHelpers: 'bundled',
// 5.2.1 是不需要配置 extensions 的
// 5.2.2 以后 需要将 vue配置进去
extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],
// filter @rollup/plugin-babel 在 5.3.0 版本才有
// filter配置和 exclude 配置是互斥的，需要自己去实现去掉 node_modules的过滤
filter: id=>{
return /(.js|.jsx|.es6|.es|.mjs)$/.test(id) && !/node_modules/.test(id)
}
}),
// 处理 vue中的 css
postcss()
],
external: [
"Vue"
]
})6.0.3 package.json清单
{
"name": "chapter-08",
"version": "1.0.0",
"description": "",
"main": "lib/index.js",
"module": "lib/index.esm.js",
"type": "module",
"scripts": {
"build": "rollup -c"
},
"devDependencies": {
"@babel/core": "^7.21.3",
"@rollup/plugin-babel": "^6.0.3",
"@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
"@vue/babel-preset-jsx": "^1.4.0",
"postcss": "^8.4.21",
"rollup": "^3.20.0",
"rollup-plugin-cleandir": "^2.0.0",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-vue": "^5.1.9",
"vue": "2.7.10",
"vue-template-compiler": "2.7.10"
}
}这里列举了所有的包的版本， package.json已经剔除了 其他非必要的字段
注意：package.json中的 type 是 module ； 也就是说， 语法需要遵循 ES Module
问题：
1、jsx语法无法识别， 按照上面的配置去调整即可
2、vue中 样式无法被转换，直接使用postcss转换即可
如果已经开始实践使用vite打包 vue组件库，建议直接上 vite + vue 3.x ， vite的生态已经足够帮你解决一些棘手的问题，避免自己逐一从 rollup 起手。