vue3 + webpack打包单个vue组件并发布到npm时出现的问题及用rollup、vite进行打包对比

webpack

打包过程

1、首先在未打包下调试好组件，确定无问题
2、新建文件夹，在里面新建index.js作为打包的入口文件
index.js里编写install函数用于引入时注册组件（在main.js中使用app.use注册组件即调用该install函数注册组件）
以下两种方式均可

3、在package.json中添加命令

4、在根目录下打开终端，运行npm run lib命令进行打包

5、在main.js中将打包后的js文件引入并使用use注册组件即可

问题

打包后的组件onMounted、onUpdated、watch等方法不执行

原因

找了好久问题，最后在前端大佬帮助下找到了

在组件内引入vue的方法时若使用runtime版本就会产生该问题，而此处改为从vue引入就没有问题。
后来在打包后的文件中发现，如果从vue引入，那么打包后的文件代码量小，没有将vue库打包进来；而如果使用runtime版本，打包后的代码量达到万级别，很明显是将vue库也打包进来了。由此可推测应该是webpack在打包时默认只配置了不将vue库打包，而如果是runtime则会打包，导致与项目中引入的vue产生冲突。

解决

1、改成从vue引入

2、重复打包过程的1-5步，发现方法都正常执行了

发布npm

1、在上述5步正常后，在打包文件夹下执行npm init命令添加package.json文件

并配置package.json文件

此时已经可以在根目录下使用npm i ./Demo将本地包以第三方库方式下载到node_modules中

并以第三方库的方式引入使用

2、如果需要发布到npm上供其他人使用则需要先检查npm命令使用的源，如果非官方源则使用nrm ls和nrm use将源切到npm官方源
3、使用npm login命令在终端登录
4、使用npm publish将包发布到npm上
5、使用npm i下载包使用即可

rollup

打包过程

1、npm i -g rollup全局安装rollup
2、在项目里新建rollup.config.js文件，并添加如下配置

// rollup.config.js
import resolve from "rollup-plugin-node-resolve"
import vue from "rollup-plugin-vue"
import babel from "@rollup/plugin-babel"
import commonjs from "@rollup/plugin-commonjs"
import image from "@rollup/plugin-image"

const config = {
  input: "./src/components/Demo/index.js", // 必须，入口文件
  output: { // 必须，输出文件 (如果要输出多个，可以是一个数组)
    exports: "named", // 输出多个文件
    name: 'DemoByRollup',
    globals: {
      vue: "Vue" // 告诉rollup全局变量Vue即是vue
    }
  },
  external: ['vue'],
  plugins: [ // 引入的插件在这里配置
    resolve(),
    vue({
      css: true,
      compileTemplate: true
    }),
    babel({
      exclude: "**/node_modules/**"
    }),
    commonjs(),
    image()
  ]
}

export default config

3、安装所需的插件
4、在package.json里添加打包命令
"build:umd": "rollup -c --format umd --file dist/components.umd.js"

5、在组件文件目录下执行该命令进行打包

6、引入组件使用

问题及原因

问题

一开始也出现了之前的状况，就是从vue引入的api不执行

解决

在rollup.config.js中添加一项配置如下

表示不将vue打包到最后的文件中，而是以外部引入的方式。最后发现添加了该项后打包后的文件从2000多行变成了40多行，打包速度也明显提高了，并且api也正常执行了。

原因

从以上现象可以推测出，api无法执行的原因应该是：rollup对Demo组件打包时将vue也一起打包进来，main.js也引入了vue，直接使用Demo会产生冲突导致api无法执行

Vite

打包过程

1、新建vite.config.js文件并添加如下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/components/Demo/index.js'),
      name: 'Demo',
      fileName: (format) => `Demo.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

2、安装所需的包

npm i vite @vitejs/plugin-vue path

3、在package.json中添加命令

4、使用npm run build:vite进行打包
5、将组件引入使用

总结

通过使用webpack、rollup和vite打包对比，发现最终原因应该是：打包工具对组件打包时将vue库也打包进来，而main.js也从vue库中引入了api，所以会产生冲突导致api无法执行。