快速构建和发布组件库：十分钟内使用 Vite

2023-09-14 16:37:13

在快速发展的数字时代，组件库已成为构建高效且可维护的应用程序的关键。利用 Vite 的强大功能，您可以在短短十分钟内创建和发布自己的组件库。本文将引导您完成每一步，让您轻松构建和发布自己的组件。

构建组件库

安装 Vite： 使用 npm 或 yarn 安装 Vite：npm install -g vite 或 yarn global add vite。
创建一个新项目： 使用 vite create my-component-library 创建一个新项目。
创建组件： 在 src/components 目录中创建您的组件文件。例如：src/components/MyButton.vue。
编写组件： 编写您的组件代码，包括模板、脚本和样式。

配置 Vite

为了优化组件库的构建过程，您需要配置 Vite。

编辑 vite.config.js： 打开 vite.config.js 文件并添加以下内容：

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'my-component-library',
      fileName: 'index',
    },
    rollupOptions: {
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

创建 index.js： 在 src 目录中创建一个 index.js 文件并导出您的组件：

export { default as MyButton } from './components/MyButton.vue';

发布到 NPM

安装并配置 Rollup： 安装 Rollup：npm install rollup -D。在 package.json 文件中添加以下脚本：

"scripts": {
  "build:lib": "rollup -c rollup.config.js",
  "publish": "npm publish"
}

创建 rollup.config.js： 在项目根目录下创建一个 rollup.config.js 文件：

import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import { terser } from 'rollup-plugin-terser';

const pkg = require('./package.json');

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: 'es',
      sourcemap: true,
    },
  ],
  plugins: [
    nodeResolve(),
    commonjs(),
    typescript(),
    terser(),
  ],
};