使用rollup搭建vue组件

vue库采用rollup进行打包，一般项目使用webpack，类库使用rollup

1.npm init

2.安装依赖

npm i rollup rollup-plugin-babel @babel/core @babel/preset-env
npm i rollup-plugin-serve

        rollup核心包

        rollup-plugin-babel:一个用于 rollup 和 babel 之间无缝集成的 rollup 插件。

        @babel/core:babel核心模块

        @babel/preset-env:es6转es5

3.配置rollup.config.js文件

// 开启服务的插件
import serve from 'rollup-plugin-serve'
//  rollup使用babel的 的插件
import babel from 'rollup-plugin-babel'
export default {
    input: './src/index.js',
    output: {
        file: 'dist/vue.js',
        name: 'Vue',//全局变量
        format: 'umd',//统一模块化
        sourcemap: true//开启映射
    },
    plugins: [
        babel({
            exclude: 'node_modules/**',
        }),
        serve({
            open: true, //自动打开浏览器
            openPage: '/public/index.html',
            port: '8888',
            contentBase: '',//想对当前目录查找openPage
        })
    ]
}

4.配置babel

在根目录创建.babelrc文件

{
    "presets": [
        "@babel/preset-env"
    ]
}

 5.添加运行脚本

//放在package.json文件的scripts属性中
"dev":"rollup -c -w"

6.创建public/index.html测试用例

7.使用npm run dev跑项目