Rollup打包发布vue2.x插件

前言

• 众多周知,rollup适合打包js库,而webpack适合打包应用.由于日常开发中很多组件其实可以跨项目的复用,所以就萌生了打包发布npm的想法。
• 先贴上官网地址 www.rollupjs.com/

开冲

第一步

# 新建文件并初始化
mkdir rollup_vue
cd rollup_vue
npm init -y

第二步-安装需要的所有依赖

npm i -D rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-vue vue-template-compiler

第三步 -配置rollup.config.js

import resolve from 'rollup-plugin-node-resolve' 
import commonjs from 'rollup-plugin-commonjs' 
import vuePlugin from 'rollup-plugin-vue'
export default {
    input: 'src/index.js', // 定义入口文件
    output: {
        name: 'bundle',
        file: 'dist/bundle.js',
        format: 'umd'
    },
    plugins: [
        resolve({ extensions: ['.vue'] }),
        commonjs(),
        vuePlugin(),
    ]
}

第四步-在package.json中配置打包脚本并运行npm run build

"scripts": {
    "build": "rollup -c"
},

红色警报？

[!] Error: rollup-plugin-vue requires @vue/compiler-sfc to be present in the dependency tree.

# 于是你现在 npm i -D @vue/compiler-sfc 然后再 npm run build
# 船新的报错又来了..

[!] (plugin commonjs) SyntaxError: Unexpected token (2:2) in /Users/2u/Desktop/rollupv/src/components/Test.vue?vue&type=template&id=dc87507c&lang.js

## 于是找了网上很多帖子,照着一步一步来都一样会各种报错。 这里等待大神来处理了。--来自菜🐔的无奈

发现问题

# 其实就是 rollup-plugin-vue 的版本问题, 我们现在的版本应该是 6.0.0" 
# 如果在 5.0.1的版本里 直接build 可打包成功且不需要依赖@vue/compiler-sfc这个包
# 所以第二步直接先npm i -D rollup-plugin-vue@5.0.1

其实还是希望有大佬可以指点6.0的rollup-plugin-vue需要怎样配置，在线等...