rollup3.x+vue2打包组件的实现

下面是rollup3.x+vue2打包组件的实现攻略：

什么是Rollup

Rollup是一个JavaScript模块打包器，可以将小块代码编译成大块复杂的代码，它专注于ES模块的打包。

Rollup和Vue组件库打包

Vue组件库是一种常见的前端开发方式，它可以将页面中可复用的组件单独封装成一个独立的组件库，使用时只需要引用该组件库就可以方便地使用这些组件。

在使用Rollup打包Vue组件库时，需要配置rollup.config.js文件。下面是一个示例代码：

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';

const isProduction = process.env.NODE_ENV === 'production';

export default {
  input: 'src/index.js',
  output: [
    {
      file: isProduction ? 'dist/my-component.min.js' : 'dist/my-component.js',
      format: 'umd',
      name: 'MyComponent',
      globals: {
        vue: 'Vue',
      },
      exports: 'named',
    },
    {
      file: isProduction ? 'dist/my-component.esm.min.js' : 'dist/my-component.esm.js',
      format: 'es',
      exports: 'named',
    },
  ],
  plugins: [
    resolve({
      extensions: ['.js', '.vue'],
    }),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
    }),
    isProduction && terser(),
  ],
  external: ['vue'],
};

示例代码中定义了输入文件和输出文件的路径，以及打包文件的格式和名称。其中，输出文件格式为umd和es；umd格式适用于在浏览器中使用，而es格式适用于ES模块的使用。

该配置中引入了一些Rollup的插件，如resolve、commonjs、babel和terser。这些插件可以实现代码的转换和压缩等功能。

Vue组件库示例

下面是一个简单的Vue组件库示例，包含MyComponent和HelloWorld两个组件。

MyComponent组件

<template>
  <div class="my-component">
    <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue';

export default {
  name: 'MyComponent',
  components: {
    HelloWorld,
  },
};
</script>

上面的代码中导入了HelloWorld组件，然后在MyComponent组件中使用了HelloWorld组件。

HelloWorld组件

<template>
  <div class="hello-world">
    <h1>Hello World</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'This is a hello world component!',
    };
  },
};
</script>

<style scoped>
.hello-world {
  text-align: center;
}
</style>

HelloWorld组件是一个简单的组件，包含了一个标题和一段文字。

以上就是rollup3.x+vue2打包组件的实现攻略，希望可以帮助你完成组件库的开发和打包。