快捷導(dǎo)航

rollup打包vue組件并發(fā)布到npm的方法

更新時間：2023年05月25日 11:57:40 作者：UzumakiHan

這篇文章主要介紹了rollup打包vue組件并發(fā)布到npm,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

基本的工程化插件

@rollup/plugin-node-resolve 幫助 rollup 識別外部模塊
@rollup/plugin-babel babel插件將es6+轉(zhuǎn)為es5
rollup-plugin-copy 直接復(fù)制靜態(tài)文件
@rollup/plugin-terser 壓縮代碼
@rollup/plugin-commonjs 將commonjs模塊轉(zhuǎn)為es模塊
@rollup/plugin-typescript typescript插件
@rollup/plugin-alias 路徑別名

npm i @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-terser rollup-plugin-vue @rollup/plugin-typescript @babel/core - D

處理Vue文件

rollup-plugin-vue

用于處理.vue文件。vue2和vue3項目所用的rollup-plugin-vue版本不一樣，vue的編譯器也不一樣。

vue2：rollup-plugin-vue^5.1.9 + vue-template-compiler
vue3：rollup-plugin-vue^6.0.0 + @vue/compiler-sfc

npm i vue-template-compiler @vue/compiler-sfc -D

vue2和vue3版本的plugins可以這樣在devDependencies中指定,，然后npm install

"devDependencies":{
    "rollup-plugin-vue2": "npm:rollup-plugin-vue@^5.1.9",
    "rollup-plugin-vue3": "npm:rollup-plugin-vue@^6.0.0",
}

打包CSS插件

rollup-plugin-postcss 識別css和預(yù)處理文件（如果css，rollup-plugin-postcss需要配合sass使用）

這里我以分別vue2和vue3各創(chuàng)建一個rollup.config.js

vue2-----rollup.vue2.config.js，配置如下

import resolve from '@rollup/plugin-node-resolve';
import vue2 from 'rollup-plugin-vue2';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss'
import typescript from "@rollup/plugin-typescript";
export default {
    input: 'src/index.ts',
    output: {
        globals: {
            vue: "Vue"
        }
    },
    plugins: [
        resolve(),
        typescript(),
        terser(),
        json(),
        vue2({
            css: true,
            compilerTemplate: true,
            preprocessStyles: true
        }),
        babel({
            exclude: "**/node_modules/**"
        }),
        commonjs(),
        postcss()
    ]
}

vue3-----rollup.vue3.config.js，配置如下

import resolve from '@rollup/plugin-node-resolve';
import vue3 from 'rollup-plugin-vue3';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss'
import typescript from '@rollup/plugin-typescript';
export default {
    input: 'src/index.ts',
    output: {
        globals: {
            vue: "Vue"
        }
    },
    plugins: [
        resolve(),
        typescript(),
        terser(),
        json(),
        vue3({
            css: true,
            compilerTemplate: true,
            preprocessStyles: true
        }),
        babel({
            exclude: "**/node_modules/**"
        }),
        commonjs(),
        postcss()
    ]
}

配置打包命令，這里我把cjs、umd、es、iife都分別打包出來了

"scripts": {
    "build": "npm run build:vue3 && npm run build:vue2",
    "build:vue2": "rimraf dist/vue2/* && npm run build:umdvue2 && npm run build:esvue2 && npm run build:unpkgvue2 && npm run build:cjsvue2",
    "build:umdvue2": "rollup -c rollup.vue2.config.js --format umd --name mList --file dist/vue2/index.umd.js",
    "build:esvue2": "rollup -c rollup.vue2.config.js --format es --file dist/vue2/index.esm.js",
    "build:unpkgvue2": "rollup -c rollup.vue2.config.js --format iife --file dist/vue2/index.min.js",
    "build:cjsvue2": "rollup -c rollup.vue2.config.js --format cjs --file dist/vue2/index.cjs.js",
    "build:vue3": "rimraf dist/vue3/* && npm run build:umdvue3 && npm run build:esvue3 && npm run build:unpkgvue3 && npm run build:cjsvue3",
    "build:umdvue3": "rollup -c rollup.vue3.config.js --format umd --name mList --file dist/vue3/index.umd.js",
    "build:esvue3": "rollup -c rollup.vue3.config.js --format es --file dist/vue3/index.esm.js",
    "build:unpkgvue3": "rollup -c rollup.vue3.config.js --format iife --file dist/vue3/index.min.js",
    "build:cjsvue3": "rollup -c rollup.vue3.config.js --format cjs --file dist/vue3/index.cjs.js"
  },

打包后的文件