欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

rollup3.x+vue2打包組件的實現(xiàn)

 更新時間：2023年03月22日 09:05:20   作者：知了清語  
本文主要介紹了rollup3.x+vue2打包組件的實現(xiàn)，詳細的介紹了打包會存在的問題，包版本的問題，babel 轉(zhuǎn)換jsx等問題，具有一定的參考價值，感興趣的可以了解一下

vue2 和vue3 在 rollup 里面打包會存在幾種問題， 包版本的問題，babel 轉(zhuǎn)換jsx等問題

將vue2寫的組件 打成一個包，需要解決如下幾個問題

  • 支持jsx
  • 支持less, sass
  • 導出多種格式的包 ES Module umd 等

先梳理完成功能所需要的最小的包清單，以及包之間的依賴關(guān)系

包的依賴關(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個包； 這2個包需要傳遞給 babel， 因此需要安裝 @rollup/plugin-babel （這里版本說明在下面）
    • @vue/babel-helper-vue-jsx-merge-props ^1.4.0
    • @vue/babel-preset-jsx ^1.4.0

@rollup/plugin-babel 版本說明

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 配置， 沒配置，控制臺有一些warning
      babelHelpers: 'bundled',
      // 5.2.1 是可以不用配置  extensions
      // 5.2.2 以后 需要將 vue配置進去
      // extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],
    }),
    // 需要處理vue中的css
    postcss()
  ],
  external: [
    "Vue"
  ]
})

6.0.3 配置jsx的寫法

@rollup/plugin-babel 6.x 版本也可以用上面的語法，主要就是 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 配置， 沒配置，控制臺有一些warning
      babelHelpers: 'bundled',
      // 5.2.1 是不需要配置 extensions 的
      // 5.2.2 以后 需要將 vue配置進去
      extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],

      // filter @rollup/plugin-babel 在 5.3.0 版本才有
      // filter配置和 exclude 配置是互斥的，需要自己去實現(xiàn)去掉 node_modules的過濾
      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 ； 也就是說， 語法需要遵循 ES Module

問題：

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

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

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

最后

網(wǎng)上很多文章，告訴你如何配置 rollup , 一次性下載很多包，雖然模仿著做了，但是，可能依舊會報錯；

本次從包的關(guān)聯(lián)關(guān)系，包的版本說明，以及出現(xiàn)問題如何解決，記錄一次 rollup 配置 vue 打包實踐。

到此這篇關(guān)于rollup3.x+vue2打包組件的實現(xiàn)的文章就介紹到這了,更多相關(guān)rollup3.x vue2打包組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue使用openlayers實現(xiàn)移動點動畫

    vue使用openlayers實現(xiàn)移動點動畫

    這篇文章主要為大家詳細介紹了vue使用openlayers實現(xiàn)移動點動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • Vue中watch與watchEffect的區(qū)別詳細解讀

    Vue中watch與watchEffect的區(qū)別詳細解讀

    這篇文章主要介紹了Vue中watch與watchEffect的區(qū)別詳細解讀,watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽器，在寫法和用法上有一定區(qū)別，是同一功能的兩種不同形態(tài)，底層都是一樣的,需要的朋友可以參考下
    2023-11-11
  • VSCode創(chuàng)建Vue項目的完整步驟教程

    VSCode創(chuàng)建Vue項目的完整步驟教程

    Vue是一個輕量級、漸進式的Javascript框架,如果想要要開發(fā)全新的Vue項目,建議項目構(gòu)建工具vue-cli,下面這篇文章主要給大家介紹了關(guān)于VSCode創(chuàng)建Vue項目的完整步驟,需要的朋友可以參考下
    2022-06-06
  • Vue項目識別不到@別名問題及解決

    Vue項目識別不到@別名問題及解決

    這篇文章主要介紹了Vue項目識別不到@別名問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 解析VUE中nextTick是什么

    解析VUE中nextTick是什么

    nextTick是Vue提供的一個全局API，由于Vue的異步更新策略導致我們對數(shù)據(jù)的修改不會立刻體現(xiàn)，在DOM變化上，此時如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下
    2022-11-11
  • 簡易vuex4核心原理及實現(xiàn)源碼分析

    簡易vuex4核心原理及實現(xiàn)源碼分析

    這篇文章主要為大家介紹了簡易vuex4核心原理及實現(xiàn)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-01-01
  • Vue.js分頁組件實現(xiàn)：diVuePagination的使用詳解

    Vue.js分頁組件實現(xiàn)：diVuePagination的使用詳解

    這篇文章主要介紹了Vue.js分頁組件實現(xiàn)：diVuePagination的使用詳解,需要的朋友可以參考下
    2018-01-01
  • 解決Vue @submit 提交后不刷新頁面問題

    解決Vue @submit 提交后不刷新頁面問題

    這篇文章主要介紹了解決Vue @submit 提交后不刷新頁面問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 淺談Vue.js中的v-on(事件處理)

    淺談Vue.js中的v-on(事件處理)

    本篇文章主要介紹了Vue.js中的v-on(事件處理)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue 虛擬DOM的原理

    vue 虛擬DOM的原理

    這篇文章主要介紹了vue 虛擬DOM的原理，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下
    2020-10-10

最新評論