vite组件项目打包

阅读数:272 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

Vite 是一个现代化的前端构建工具，它提供了快速的冷启动、即时模块热更新和真正的按需编译等特性。

二、Vite构建组件项目

1、配置vite.config.js

在你的项目根目录下，确保你有一个 vite.config.js 文件（或者对应的 Vite 配置文件），在这个文件中配置你的打包选项。如果你的项目是一个组件库，你可能需要使用 Vite 的库模式。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    // 库模式配置
    lib: {
      entry: 'path/to/your/entry.js', // 组件入口文件
      name: 'MyComponent', // 打包后的全局变量，对于UMD格式
      fileName: (format) => `my-component.${format}.js` // 打包文件的名字
    },
    // 打包输出配置
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 为打包类型提供全局变量
        globals: {
          vue: 'Vue'
        },
// 如果你想要 CSS 作为一个单独的文件被导出，你可以使用 `assetFileNames` 属性
        assetFileNames: `my-component-library.[ext]`
      }
    }
  }
});

在 Vite 中，你可以通过配置来控制 CSS 是否应该被代码分割。如果你希望 CSS 作为单独的文件被导入，可以在 vite.config.js 文件中配置：

export default {
  // ...其他配置
  build: {
    // ...其他构建配置
    cssCodeSplit: true,
  },
};

当 cssCodeSplit 设置为 true 时，CSS 将会被分割成单独的文件，可以通过 <link> 标签在 HTML 中引入，或者通过 JavaScript 导入。

默认情况下 cssCodeSplit 是开启的，这意味着 CSS 会被分割成不同的块。如果你关闭了这个选项，所有的 CSS 将会被打包到一个文件中。确保这个配置符合你的需求。

2、打包组件

vite build

这个命令会根据你在 vite.config.js 文件中的配置来打包你的组件项目。

3、发布到包管理器

完成打包后，你通常会得到一个 dist 文件夹，里面包含了打包好的文件。在发布之前，请确保你的 package.json 文件中的 main 字段指向了你的入口文件，通常是 dist 文件夹中的某个文件。

{
  "name": "my-custom-component-library",
  "version": "1.0.0",
  "type": "module",
  "main": "dist/my-component-library.umd.js",
  "module": "dist/my-component-library.es.js",
  "exports": {
    ".": {
      "import": "./dist/my-component-library.es.js",
      "require": "./dist/my-component-library.umd.js"
    },
    "./styles": {
      "import": "./dist/styles.css"
    }
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "^2.0.0"
  },
  "peerDependencies": {
    "vue": "^3.0.0"
  }
}

如果你的组件库是一个单文件组件库（即只有一个主要的.vue文件），则可以将main字段设置为该文件的路径。例如：“main”: "src/MyComponent.vue"
main字段指定了组件库的主入口文件，通常是UMD格式的文件。
module字段指定了组件库的ES模块入口文件
"type": "module" 指定了包中的JavaScript代码是使用ES模块语法编写的。
files字段指定包含在npm包中的文件或目录
如果你的组件库是一个多文件组件库，可以考虑使用exports字段来指定入口文件。

"exports": {
  ".": {
    "import": "./src/index.js",
    "require": "./dist/my-component.common.js"
  }
}

这里的import属性指定了ES模块的入口文件路径，而require属性指定了CommonJS模块的入口文件路径。

使用 "./styles": { "import": "./dist/styles.css" } 这样的结构来指定模块的子路径别名。这是 package.json 的 "exports" 字段的一个特性，它允许库的作者显式地指定哪些文件可以被消费者导入。

{
  "name": "some-package",
  "version": "1.0.0",
  "exports": {
    "./styles": {
      "import": "./dist/styles.css"
    }
  }
}

在这个例子中，"exports" 字段定义了一个包的导出映射，指定了当消费者尝试导入 some-package/styles 时，实际上应该加载的是 some-package 包的 dist/styles.css 文件

这意味着当用户安装了 some-package 并在他们的项目中写下如下代码时：

import 'some-package/styles';

实际上，他们将导入的是位于 node_modules/some-package/dist/styles.css 的文件。

然后，你可以使用包管理器（如 npm 或者 yarn）来发布你的组件库：

npm publish

确保你在发布前已经登录到了对应的包管理器账户。

三、UMD格式

UMD (Universal Module Definition) 格式是一种 JavaScript 模块化格式，它允许 JavaScript 模块在各种环境中运行，包括浏览器环境和 Node.js。UMD 模块首先尝试使用 AMD（异步模块定义）的方式定义模块，如果环境不支持 AMD，它会尝试使用 CommonJS 的方式定义模块，如果两者都不可用，它会将模块导出到全局变量中。

在 Vue.js 的上下文中，如果你想要将你的 Vue 组件或者插件打包成 UMD 格式，你可以使用构建工具（如 Webpack, Rollup 或 Vite）来配置输出格式为 UMD。这样打包出来的文件可以在浏览器中通过 <script> 标签直接引入，也可以在支持 CommonJS 或 AMD 规范的环境中使用。

使用 Vite 打包 Vue 组件为 UMD 格式的基本配置在 vite.config.js 文件中可以这样设置：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/entry.js', // 组件的入口文件
      name: 'MyVueComponent', // 打包后的全局变量名称
      fileName: (format) => `my-vue-component.${format}.js` // 输出文件的名称
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 指定输出格式为 UMD
        format: 'umd',
        // 指定全局变量名称
        name: 'MyVueComponent',
        // 确保 UMD 构建过程中 Vue 能够正确地被外部化
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
});

在上面的配置中，lib.entry 指向你的入口文件，lib.name 是全局变量的名称，这个变量会在 UMD 模块加载到浏览器环境时被创建。fileName 函数定义了不同格式的构建文件的名称。rollupOptions.external 指定了不应该包含在你的库中的外部依赖，比如 Vue 本身。rollupOptions.output 中的 globals 选项是告诉 Rollup 如何将这些外部依赖映射到全局变量。

在浏览器中使用 UMD 模块时，你需要先引入 Vue，然后引入你的组件，例如：

<script src="https://unpkg.com/vue@next"></script>
<script src="path/to/your/my-vue-component.umd.js"></script>

这样，你的组件或库就会注册为全局变量 MyVueComponent，可以直接在浏览器中使用。

四、vue3组件入口文件

在 Vue 3 项目中创建组件库时，入口文件（通常称为 "entry point"）是整个库的起始点。这个文件的目的是导出你想要作为库的一部分提供的所有组件。入口文件通常会有以下几个特点：

导出一个或多个组件
可以设置一个插件，以便可以通过Vue.use()的方式安装整个组件库
可以包含一些全局的配置或样式

下面是一个简单的 Vue 3 组件库入口文件的例子：

// src/entry.js
import MyComponent from './MyComponent.vue';
import AnotherComponent from './AnotherComponent.vue';

// 如果你想要允许用户通过 Vue.use() 的方式安装整个组件库
const MyLibrary = {
  install(Vue) {
    Vue.component('MyComponent', MyComponent);
    Vue.component('AnotherComponent', AnotherComponent);
  }
};

// 导出组件
export { MyComponent, AnotherComponent };

// 导出插件
export default MyLibrary;

在这个例子中，MyComponent 和 AnotherComponent 是两个 Vue 组件。通过 install 方法，我们可以将这些组件注册为全局组件，这样用户就可以在他们的 Vue 应用中直接使用它们而无需再次导入和注册。

用户可以这样使用你的库：

import Vue from 'vue';
import MyLibrary from 'my-library';

// 安装整个库
Vue.use(MyLibrary);

// 或者，如果他们只想要导入特定的组件
import { MyComponent } from 'my-library';

// 在他们的组件中局部注册
export default {
  components: {
    MyComponent
  }
};

在你的 vite.config.js 配置文件中，你将指定 src/entry.js 作为库模式的入口：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/entry.js',
      name: 'MyLibrary',
      // ...
    },
    // ...
  }
});

这样配置后，当你运行 vite build 时，Vite 会使用 src/entry.js 作为入口来打包你的组件库。

五、组件库打包成.tgz文件

如果你有一个使用 Vite 构建的 Vue 3 组件库，并且你想要将它打包成一个 .tgz 文件以便作为一个 npm 包来安装和分发，你需要遵循以下步骤：

1、构建你的库

确保你的 vite.config.js 文件配置了库模式，然后在你的库的根目录运行构建命令。

npm run build

这将生成构建产物，通常在 dist 目录。

2、打包成.tgz文件

在你的库的根目录，你可以使用 npm pack 命令来创建一个 .tgz 文件。这个文件包含了你的包的所有文件，和它将被发布到 npm 时一样。

npm pack

这将在当前目录生成一个 .tgz 文件，文件名通常是根据你的 package.json 中的 name 和 version 字段来命名的。

3、安装.tgz文件

你可以将这个 .tgz 文件安装到任何 npm 项目中。导航到你想要安装这个包的项目的根目录，然后运行：

npm install /path-to-your-tgz-file/your-package-name-version.tgz

确保替换 /path-to-your-tgz-file/your-package-name-version.tgz 为你的 .tgz 文件的实际路径和文件名。

4、在项目中使用你的库

安装完成后，你就可以像使用其他 npm 包一样在你的项目中使用你的 Vue 组件库了。

5、更新你的库

如果你更新了你的组件库，并且想要更新你在其他项目中安装的 .tgz 包，你需要重新运行 npm pack 命令来生成一个新的 .tgz 文件，然后在其他项目中重新运行 npm install 命令来安装新的包。

npm install /path-to-your-tgz-file/your-package-name-version.tgz

有时候，清除 Vite 的缓存可以解决问题，因为缓存可能会导致 Vite 无法检测到文件的新变化。你可以尝试删除项目中的 node_modules/.vite 缓存目录，然后重新启动开发服务器。

rm -rf node_modules/.vite
npm run dev

六、如果库依赖Element Plus

如果你想要使用 Vite 来构建一个库，并且这个库依赖于 Element Plus，你需要确保在 Vite 的配置中正确地处理了 Element Plus。Vite 的库模式允许你创建可重用的库，这些库可以被其他项目作为依赖项导入。

在 Vite 的配置中，你可以通过设置 build.lib 选项来指定库模式的构建配置。同时，你可能需要将 Element Plus 设置为外部依赖，以避免将其打包到你的库文件中。这样做可以减小你的库文件大小，并允许最终用户自行决定如何引入 Element Plus。

这里有一个配置示例，展示了如何在 Vite 配置文件中设置库模式和外部化 Element Plus：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js', // 你的库入口文件
      name: 'MyAwesomeLibrary', // 全局变量的名称，用户在浏览器中使用你的库时会用到
      fileName: (format) => `my-awesome-library.${format}.js` // 输出文件的名称
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue', 'element-plus'],
      output: {
        // 为上面的外部化依赖提供全局变量
        globals: {
          vue: 'Vue',
          'element-plus': 'ElementPlus'
        }
      }
    }
  }
});

在这个配置中，external 选项用于指定不应该被打包进库的外部依赖。globals 选项则用于指定这些外部依赖在全局环境中的变量名称。

请注意，如果你的库组件直接使用了 Element Plus 的组件，那么最终使用你的库的项目也需要安装 Element Plus。因此，你可能需要在你的库的 package.json 文件中将 Element Plus 添加为 peerDependencies，而不是 dependencies，这样可以提示用户需要安装 Element Plus：

{
  "peerDependencies": {
    "element-plus": "^x.x.x" // 替换为你使用的 Element Plus 版本
  }
}

这样配置后，当你运行 vite build 命令时，Vite 会按照库模式来构建你的项目，并且 Element Plus 会作为外部依赖而不会被打包进来。

秒吧学习