Создайте доступную для публикации библиотеку Vue с открытым исходным кодом: useCounter

В этой статье я покажу вам процесс создания библиотеки Vue. Ознакомиться с демонстрационной библиотекой можно здесь.

Я продемонстрирую это, создав собственный хук Vue, useCounter. Этот хук предоставит утилиты для управления счетчиком и может использоваться во всех компонентах приложения.

Мы начнем с создания приложения Vue с помощью Vite.

Запустите команду ниже.

npm init vite@latest

Он спросит некоторые детали, пожалуйста, предоставьте ему следующее: -

Название проекта: use-counter
Выберите фреймворк: Vue
Выберите вариант: Typescript

cd в приложение (счетчик использования) и запустите npm install или любой другой менеджер пакетов, который вы используете.

Удалите все в папке src, созданной Vite. Добавьте 2 новых файла: -

index.ts:- Это будет точка входа в нашу библиотеку.
use-counter.ts:- Здесь мы поместим наш хук Vue.

Давайте экспортируем все, что у нас есть в use-counter.ts, в файл index.ts.

export * from './use-counter';

Наш хук useCounter будет выглядеть примерно так:

import { ref } from "vue";

export function useCounter(initialValue = 0) {
  const counter = ref(initialValue);

  const inc = (n = 1) => (counter.value += n);
  const dec = (n = 1) => (counter.value -= n);
  const get = () => counter.value;
  const set = (n: number) => (counter.value = n);
  const reset = (val = initialValue) => {
    initialValue = val;
    return set(val);
  };

  return {
    counter,
    inc,
    dec,
    get,
    set,
    reset,
  };
}

Это простая реализация, мы используем утилиту ref для инициализации значения нашего реактивного счетчика, а также некоторые действия inc dec get set и reset для управления одним и тем же реактивным значением.

Если мы запустим npm run build сейчас, это не сработает, так как текущая конфигурация Vite ищет файл записи main.ts. Давайте изменим точку входа следующим образом:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, './src/index.ts'),
      name: 'use-counter'
    }
  }
})

(Добавьте @types/node, чтобы исправить ошибку для модулей __dirname и path).

Если вы npm run build сейчас, он будет успешно построен. Он создаст 2 файла: один в формате UMD (use-counter.umd.cjs), а другой в формате ESM (use-counter.js). UMD поможет нам импортировать наш хук в среду Node, а ESM — в среду браузера.

Если вы внимательно посмотрите на оба файла, они довольно большие по размеру, хотя у нас всего 24 строки кода, это происходит потому, что за кулисами Vite использует Rollup для создания нашей библиотеки, а также объединяет всю Vue структуру. Мы можем убрать это, используя некоторые параметры свертки в конфигурации Vite, например:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, './src/index.ts'),
      name: 'use-counter'
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

В rollupOptions мы говорим Rollup вынуть модуль vue из пакета и вместо него использовать пустой глобальный тип модуля с именем Vue. В связи с этим нам нужно сделать нашу зависимость для Vue одноранговой. Это заставит разработчика этой библиотеки установить Vue в свое приложение перед использованием этой библиотеки. Наш package.json выглядит так.

{
  "name": "use-counter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "peerDependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@types/node": "^18.13.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vue-tsc": "^1.0.24"
  }
}

Если мы сейчас запустим npm run build, то увидим, что файлы резко уменьшились.

import { ref as u } from "vue";
function m(o = 0) {
  const t = u(o), n = (e = 1) => t.value += e, c = (e = 1) => t.value -= e, s = () => t.value, r = (e) => t.value = e;
  return {
    counter: t,
    inc: n,
    dec: c,
    get: s,
    set: r,
    reset: (e = o) => (o = e, r(e))
  };
}
export {
  m as useCounter
};

Если вы заметили папку dist, у нас нет ничего, связанного с типами для Typescript, разработчики, устанавливающие нашу библиотеку в приложении Typescript, не смогут импортировать наш хук, поскольку Typescript ищет определения типов. Мы также можем добавить тех, кто использует плагин Vite dts.

Выполнить npm install --save-dev vite-plugin-dts. И измените конфигурацию Vite следующим образом:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import dts from "vite-plugin-dts";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), dts({ insertTypesEntry: true })],
  build: {
    lib: {
      entry: resolve(__dirname, "./src/index.ts"),
      name: "use-counter",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

Запуск сборки теперь создает определения типов в нашей папке dist.

Следующим наиболее важным шагом является настройка нашего package.json таким образом, чтобы любой, кто устанавливает нашу библиотеку, мог импортировать правильный файл из нашей папки dist.

Это следующие свойства, которые нужно добавить/обновить в package.json, чтобы сделать нашу библиотеку импортируемой:

files: это свойство как allowlist всех файлов, которые должны быть включены в выпуск npm.
main: определяет файл, который будет импортирован при использовании с require.
module: определяет файл, который будет импортирован при использовании с import.
types: определения типов для Typescript для поиска в модуле.

Вот так, наш новый package.json будет выглядеть так:-

{
  "name": "vue-use-counter",
  "version": "0.0.1",
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/use-counter.umd.cjs",
  "module": "./dist/use-counter.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "vue-tsc && vite build"
  },
  "peerDependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@types/node": "^18.13.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vite-plugin-dts": "^2.0.0-beta.0",
    "vue-tsc": "^1.0.24"
  }
}

Я изменил имя пакета на vue-use-counter для публикации, так как use-counter был недоступен, вы должны изменить его на что-то другое перед публикацией. После изменения имени на соответствующее запустите npm publish, и ваш пакет будет опубликован в реестре npm. (Вы должны настроить свою учетную запись на npmjs.org перед публикацией).

Я импортировал этот же модуль в приложение здесь,

Vue (forked) — StackBlitz
Стартовый проект для Vue.jsstackblitz.com

И это работает как шарм. 🚀

Спасибо за завершение урока. 👍🏻

Создайте доступную для публикации библиотеку Vue с открытым исходным кодом: useCounter

Похожие вопросы