vue2自定义组件通过rollup配置发布到npm的详细步骤

下面是详细的“vue2自定义组件通过rollup配置发布到npm的详细步骤”。

准备工作

在开发vue2自定义组件前，需要准备好以下环境：

• Node.js
• Vue.js
• Rollup.js
• 打包工具（如Babel等）
• NPM

步骤

1. 创建项目

首先，需要创建一个npm包项目。使用npm init命令初始化项目，按照提示填写项目基本信息。然后，在项目中安装Vue.js和rollup等必需依赖项。

npm init

# 安装vue和rollup依赖项
npm install --save vue rollup rollup-plugin-babel rollup-plugin-uglify babel-core babel-preset-env

2. 创建组件

接下来，开始编写vue组件。在项目中创建一个src目录，将组件文件放在其中。

// MyComponent.vue

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

3. 配置rollup

使用Rollup.js来打包组件。在项目根目录下创建一个rollup.config.js文件，并配置入口、出口、Babel等。下面是一个基本的rollup配置示例：

// rollup.config.js

import babel from 'rollup-plugin-babel'
import { uglify } from 'rollup-plugin-uglify'

export default {
  input: 'src/index.js', // 入口文件
  output: [
    {
      file: 'dist/index.esm.js', // ES6模块
      format: 'es'
    },
    {
      file: 'dist/index.js', // CommonJS
      format: 'cjs'
    },
    {
      file: 'dist/index.min.js', // 压缩版
      format: 'umd',
      name: 'MyComponent'
    }
  ],
  plugins: [
    babel({
      exclude: 'node_modules/**'
    }),
    uglify()
  ]
}

4. 打包组件

使用命令行执行以下命令，打包组件：

rollup -c rollup.config.js

执行成功后，会在项目的dist目录下生成三个文件：index.esm.js，index.js和index.min.js。

5. 发布到npm

最后一步是将组件发布到npm：

npm publish

发布后，其他人可以使用npm安装并使用你的自定义组件。

示例说明

例1：发布一个基于element-ui封装的组件

该组件是一个基于element-ui的RadioGroup组件进行的封装，将样式和配置标准化，使得在使用的时候更加方便。首先，在项目中安装element-ui。

npm i element-ui -S

然后，编写组件代码：

// MyRadioGroup.vue

<template>
  <el-radio-group v-model="value" :size="size">
    <el-radio v-for="(item,index) in list" :key="index" :label="item.value">{{ item.text }}</el-radio>
  </el-radio-group>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css'
import { RadioGroup, Radio } from 'element-ui'

export default {
  components: {
    ElRadioGroup: RadioGroup,
    ElRadio: Radio
  },
  // 接收参数
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    size: {
      type: String,
      default: 'medium'
    }
  }
}
</script>

接着，创建rollup.config.js文件：

// rollup.config.js

import babel from 'rollup-plugin-babel'
import { uglify } from 'rollup-plugin-uglify'
import vue from 'rollup-plugin-vue'
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
import clean from 'rollup-plugin-clean'

export default {
  input: 'src/index.js', // 入口文件
  output: [
    {
      file: 'dist/index.esm.js', // ES6模块
      format: 'es',
      exports: 'named'
    },
    {
      file: 'dist/index.js', // CommonJS
      format: 'cjs',
      exports: 'named'
    },
    {
      file: 'dist/index.min.js', // 压缩版
      format: 'umd',
      name: 'MyRadioGroup',
      exports: 'named',
      globals: {
        'vue': 'Vue',
        'element-ui': 'ELEMENT'
      }
    }
  ],
  plugins: [
    clean(),
    vue({
      css: true
    }),
    commonjs(),
    resolve({
      extensions: ['.vue']
    }),
    postcss({
      plugins: [
        autoprefixer()
      ]
    }),
    babel({
      exclude: 'node_modules/**'
    }),
    uglify()
  ],
  external: [
    'vue',
    'element-ui/lib/theme-chalk/index.css',
    'element-ui/packages/radio/index.js',
    'element-ui/packages/radio-group/index.js',
    'element-ui/packages/theme-chalk/src/radio-group.scss'
  ]
}

然后，使用命令行执行以下命令，打包组件：

rollup -c rollup.config.js

打包成功后，可以在项目的dist目录下找到打包好的组件。

最后，使用npm命令发布组件：

npm publish

发布成功后，其他人可以使用npm安装并使用你封装好的自定义组件。

例2：发布一个vue2组件

继续使用上面的项目，在src中新建一个叫做AddButton.vue的组件，内容如下：

<template>
  <div>
    <button @click="handleClick">{{text}}</button>
  </div>
</template>

<script>
  export default {
    name: 'AddButton', //组件名
    props: {
      text: {
        type: String,
        default: '添加'
      },
      handleClick: {
        type: Function,
        default () {
          console.log('handleClick不是一个函数')
        }
      }
    }
  }
</script>

然后，同样是按照上面的操作打包组件。

rollup -c rollup.config.js

同样的，打包成功后发布到npm将组件封装好的设定面向Vue2的通用组件。

其他人可以通过npm下载和使用你的组件，具体是安装命令如下:

npm i your-package -S

使用我的组件发现不太满意，于是我决定对组件代码进行优化。修改代码如下：

<template>
  <div>
    <button @click="handleClick">{{text}}</button>
  </div>
</template>

<script>
  export default {
    name: 'AddButton',
    props: {
      text: {
        type: String,
        default: '添加'
      },
      handleClick: Function
    }
  }
</script>

然后，同样的流程打包组件并发布到npm。

发布完毕后，其他人只需要通过npm更新你的组件就可以了。

npm update your-package

通过上述的两个示例说明，可以看出来，我们打包发布vue自定义组件的步骤相对来说比较简单，但还是需要仔细看有关配置项的信息，了解一下具体的操作步骤以及相关配置项需要注意的地方。