Summary: This article describes how to use rollup to compile and package vUE components in Rollup.

Create a vUE component for test.vue

<template>
  <div class="msg">{{msg}}</div>
</template>
<script>
export default {
  name:'TestComponent'.setup() {
    const msg = 'hello world! This is my custom component library! ';
    return {
      msg
    }

  },
}
</script>
<style lang="scss">
  .msg {
    color: red;
  }
</style>
Copy the code

The test.vue component was introduced into the index.js entry file

import test from './test.vue';
export default function (Vue) {
  Vue.component(test.name, test);
}
Copy the code

Rollup builds NPM package dependencies that are used to package vue components

  • rollup-plugin-vue@next is used to compile vUE code. Support vue3
  • @vue/compiler-sfc is a dependency required by the rollup-plugin-vue@next plug-in
  • Rollup-plugin-postcss sass is primarily a style used in the Vue component library. Sass is installed because sass is used
npm i rollup-plugin-vue@next -D
npm i  @vue/compiler-sfc -D
npm i rollup-plugin-postcss -D
npm i sass -D
Copy the code

Configure the packaging configuration file

const vue = require('rollup-plugin-vue');
const postcss = require('rollup-plugin-postcss');
  plugins: [
    vue(),
    postcss(),
  ],
Copy the code

Run NPM run dev But there are warnings

This warning indicates that the output file is missing a variable that sets globals in the browser window, which is the same as the external modoule we set. Set this in the output of the configuration file:

  output: [{
      file: outputPath,
      format: 'umd'.name: 'datavTest'.globals: {vue: 'Vue'}}]Copy the code

Then the package will find that the component library is a success!

Writing example/index. HTML

Use (datavTest) corresponds to the name attribute configured in output in the configuration file.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js" > < / script > < script SRC = ".. /dist/datav.umd.js"></script> </head> <body> <div id="app">{{msg}} <data-test-component></data-test-component> </div> </body> <script> Vue.createApp({ setup() { var msg = 'hello my Vue component! '; return { msg }; } }).use(datavTest).mount('#app'); </script> </html>Copy the code

Cannot read property ‘openBlock’ of undefined Cannot read property ‘openBlock’ of undefined

This is because the Vue reference to the code compiled after the package is not availableAs shown in the figure above, find the render function in the compiled datav.umd.js file and change the vue in the render function to the vue set in the configuration. Open the page again to find that the component is displayed successfully!

Record on pit

  • Mistake # 1: [!] (plugin vue) TypeError: Cannot read property ‘refSugar’ of undefined

The solution is

rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install
Copy the code
  • Error 2 [!] (plugin commonjs) SyntaxError: Unexpected token (2:2) in D:\noteDemo.. src\test.vue? vue&type=template&id=0f72a62a&lang.js (2:2)

The solution isJust put the vue plug-in on top

  • Error 3 rollup-plugin-postcss (postcss plugin postcss-noop-plugin requires postcss 8. Migration guide for end-users:)

The solution is to install [email protected] and modify the configuration

    postcss({
      // Insert CSS into style
      // inject: true,
      // Put CSS in the same directory as js
      extract: true.plugins: [
         require('autoprefixer') ({overrideBrowserslist: ['> 0.15% in CN']})// Add the CSS prefix automatically]})Copy the code
  • Mistake # 4: [!] TypeError: keypath. Split is not a function because globals is configured without quotes

  • Error 5: datav.umD.js :17 Uncaught TypeError: Cannot read property ‘withScopeId’ of undefined because CSS scoped is not supported by rollUp
  • Error 6: Cannot read property ‘openBlock’ of undefined Cannot read property ‘openBlock’ of undefined

The solution: