preface

  • Rollup is good for packing JS libraries, while WebPack is good for packing applications. Since many of the components in daily development can actually be reused across projects, the idea of packaging and publishing NPM was born.
  • First paste the official website address www.rollupjs.com/

Open to rush

The first step

Create a new file and initialize it
mkdir rollup_vue
cd rollup_vue
npm init -y
Copy the code

Step 2 – Install all dependencies required

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

Step 3 – Configure 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'.// Define the entry file
    output: {
        name: 'bundle'.file: 'dist/bundle.js'.format: 'umd'
    },
    plugins: [
        resolve({ extensions: ['.vue'] }),
        commonjs(),
        vuePlugin(),
    ]
}

Copy the code

Step 4 – Configure the packaging script in package.json and run NPM run build

"scripts": {
    "build": "rollup -c"
},
Copy the code

Red alert?

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

# so you now NPM i-d@vue/compiler-sFC and then NPM run build
# new ship error is coming...[!]  (plugin commonjs) SyntaxError: Unexpected token (2:2)in/Users/2u/Desktop/rollupv/src/components/Test.vue? vue&type=template&id=dc87507c&lang.js

## So I found a lot of posts on the Internet, follow step by step will be the same various errors. It's up to the gods to take care of it. -- From the helpless dish 🐔
Copy the code

Found the problem

This is a rollup-plugin-vue version issue, we are currently running 6.0.0"
Build packages can be packaged directly in 5.0.1 without relying on the @vue/ Compiler-sFC package
# NPM i-d [email protected]
Copy the code

Rollup-plugin-vue 6.0 rollup-plugin-vue 6.0 rollup-plugin-vue 6.0 rollup-plugin-vue 6.0 rollup-plugin