今天小编给大家分享一下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.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" ] })
@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" ] })
{ "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
如果已经开始实践使用vite打包 vue组件库,建议直接上 vite + vue 3.x , vite的生态已经足够帮你解决一些棘手的问题,避免自己逐一从 rollup 起手。
以上就是“rollup3.x+vue2打包组件如何实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。