rollup 打包vue2组件

Published: · LastMod: March 25, 2023 · 609 words

rollup 打包vue2组件 🔗

rollup打包相对webpack的好处就是可以打包出es module, 在使用vue-cli创建的项目时，需要打包相关组件作为独立的库，使用rollup打包可以一次打出cjs、es、umd三个类型的包

虽然webpack5中增加了打包module的输出，但是实际在vue-cli建立的项目下，好像还不行

简单记录一下笔记

创建一个vue2的项目 🔗

vue create vue-lib

添加rollup相关依赖 🔗

yarn add rollup rollup-plugin-commonjs rollup-plugin-vue@5.1.9 -D

1
2
3
4
5
6
7

"devDependencies": {
    //...
    "rollup": "^3.20.1",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-vue": "5.1.9",
  	// ....
  }

rollup-plugin-vue这里必须用5版本的，最新版本是用来打包vue3代码的，vue2的使用会报错

创建rollup配置文件 🔗

rollup.config.mjs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import commonjs from "rollup-plugin-commonjs";
import VuePlugin from "rollup-plugin-vue";

export default {
  input: {
    app: "./src/index.js",
  },
  output: {
    dir: "./es",
    name: "app",
    format: "es",
  },
  externals: ["vue"],
  plugins: [
    commonjs(),
    VuePlugin(/* VuePluginOptions */),
  ],
};

创建入口文件 🔗

./src/index.js

1
2
3
4
5
6
7
8
9

import { foo } from "./utils";
import HelloWorld from "./components/HelloWorld.vue";
import Input from "./components/Input.vue";

export default {
  foo,
  HelloWorld,
  Input,
};

这里我们简单写2个组件，并且引入暴露出去

建立打包指令 🔗

1
2
3
4

"scripts": {
    // ...
    "rollup": "rollup -c ./rollup.config.mjs"
  },

yarn rollup

打包

image.png

可以看到最后确实是以es输出的

image.png

issues 🔗

TypeError: Cannot read properties of undefined (reading ‘styles’) 🔗

查看vue-loader版本

npm list vue-loader

1
2
3
4

➜  vue-lib git:(main) ✗ npm list vue-loader
vue-lib@0.1.0 /Users/volcano/workstation/nodejs/vue-lib
├─┬ @vue/cli-service@5.0.8
│ └── vue-loader@17.0.1

可以看到是17版本的，17版本已经是vue3版本的，需要切到vue2版本的vue-loader

装个老版本的

yarn add vue-loader@14.2.3 -D

Reference 🔗

https://cli.vuejs.org/guide/webpack.html

https://webpack.js.org/configuration/output/#outputmodule

https://rollup-plugin-vue.vuejs.org/options.html

rollup-vue2 rollup