rollup3.x+vue2打包組件如何實(shí)現(xiàn)

今天小編給大家分享一下rollup3.x+vue2打包組件如何實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

包的依賴關(guān)系

• 轉(zhuǎn)換css 需要使用rollup-plugin-postcss 插件 --> 需要安裝 postcss

• vue 和 vue-template-compiler 的版本需要一致， 這里是vue 2.7;

• vue2: 使用rollup-plugin-vue @5.x版本

• rollup3.x + vue3版本需要使用 rollup-plugin-vue @6.x版本 + @vue/compiler-sfc

• jsx的支持就需要下面2個(gè)包； 這2個(gè)包需要傳遞給 babel， 因此需要安裝 @rollup/plugin-babel （這里版本說(shuō)明在下面）

• @vue/babel-helper-vue-jsx-merge-props ^1.4.0

• @vue/babel-preset-jsx ^1.4.0

@rollup/plugin-babel 版本說(shuō)明

5.2.1  配置babel的寫法

rollup.config.js

import { defineConfig } from 'rollup'
import vue from 'rollup-plugin-vue'
import { cleandir } from 'rollup-plugin-cleandir'
import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss'

export default defineConfig({
  input: './src/index.js',
  output: [
    {
      file: 'lib/index.esm.js',
      format: 'esm',
      exports: 'named'
    },
    {
      file: 'lib/index.umd.js',
      format: 'umd',
      name: 'w'
    }
  ],
  plugins: [
    cleandir('lib'),
    vue({}),
    babel({
      exclude: 'node_modules/**',
      presets: ['@vue/babel-preset-jsx'],
     // bundled-需要顯示指明babelHelpers 配置， 沒(méi)配置，控制臺(tái)有一些warning
      babelHelpers: 'bundled',
      // 5.2.1 是可以不用配置  extensions
      // 5.2.2 以后 需要將 vue配置進(jìn)去
      // extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],
    }),
    // 需要處理vue中的css
    postcss()
  ],
  external: [
    "Vue"
  ]
})

6.0.3 配置jsx的寫法

@rollup/plugin-babel 6.x 版本也可以用上面的語(yǔ)法，主要就是 extensions 中有 .vue

rollup.config.js

import { defineConfig } from 'rollup'
import vue from 'rollup-plugin-vue'
import { cleandir } from 'rollup-plugin-cleandir'
import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss'

export default defineConfig({
  input: './src/index.js',
  output: [
    {
      file: 'lib/index.esm.js',
      format: 'esm',
      exports: 'named'
    },
    {
      file: 'lib/index.umd.js',
      format: 'umd',
      name: 'w'
    }
  ],
  plugins: [
    cleandir('lib'),
    vue({
    }),
    babel({
      // @rollup/plugin-babel 6.0.3 如果使用 filter 就注釋掉 exclude - 互斥的
      // exclude: 'node_modules/**',
      presets: ['@vue/babel-preset-jsx'],
      // 需要顯示指明babelHelpers 配置， 沒(méi)配置，控制臺(tái)有一些warning
      babelHelpers: 'bundled',
      // 5.2.1 是不需要配置 extensions 的
      // 5.2.2 以后 需要將 vue配置進(jìn)去
      extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],

      // filter @rollup/plugin-babel 在 5.3.0 版本才有
      // filter配置和 exclude 配置是互斥的，需要自己去實(shí)現(xiàn)去掉 node_modules的過(guò)濾
      filter: id=>{
        return /(\.js|\.jsx|\.es6|\.es|\.mjs)$/.test(id) && !/node_modules/.test(id)
      }
    }),

    // 處理 vue中的 css
    postcss()
  ],
  external: [
    "Vue"
  ]
})

6.0.3 package.json清單

{
  "name": "chapter-08",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js",
  "module": "lib/index.esm.js",
  "type": "module",
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@rollup/plugin-babel": "^6.0.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
    "@vue/babel-preset-jsx": "^1.4.0",
    "postcss": "^8.4.21",
    "rollup": "^3.20.0",
    "rollup-plugin-cleandir": "^2.0.0",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-vue": "^5.1.9",
    "vue": "2.7.10",
    "vue-template-compiler": "2.7.10"
  }
}

這里列舉了所有的包的版本， package.json已經(jīng)剔除了 其他非必要的字段

注意：package.json中的 type 是 module ； 也就是說(shuō)， 語(yǔ)法需要遵循 ES Module

問(wèn)題：

1、jsx語(yǔ)法無(wú)法識(shí)別， 按照上面的配置去調(diào)整即可

2、vue中 樣式無(wú)法被轉(zhuǎn)換，直接使用postcss轉(zhuǎn)換即可

如果已經(jīng)開(kāi)始實(shí)踐使用vite打包 vue組件庫(kù)，建議直接上 vite + vue 3.x ， vite的生態(tài)已經(jīng)足夠幫你解決一些棘手的問(wèn)題，避免自己逐一從 rollup 起手。

以上就是“rollup3.x+vue2打包組件如何實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。