{"id":336019,"date":"2022-07-22T09:00:25","date_gmt":"2022-07-22T09:00:25","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=336019"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=336019","title":{"rendered":"<span>\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Vue \u0432 NPM<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 Adesoji Temitope &#171;<a href=\"https:\/\/www.thisdot.co\/blog\/how-to-create-and-deploy-a-vue-component-library-to-npm\" rel=\"noopener noreferrer nofollow\">How to Create and Deploy a Vue Component Library to NPM<\/a>&#171;<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0432\u0435\u0434\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b \u201c<a href=\"https:\/\/t.me\/frontend_pasta\" rel=\"noopener noreferrer nofollow\"><u>Frontend \u043f\u043e-\u0444\u043b\u043e\u0442\u0441\u043a\u0438<\/u><\/a>\u201d, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438\u0437 \u043c\u0438\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 Vue, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u043c\u0438 \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435 \u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438\u043c\u0435\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u0430\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0448\u0430\u0433\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Vue \u0432 npm, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<ul>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Vue.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0432 npm.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Vue<\/h2>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Vue. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c yarn \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0430\u043a\u0435\u0442\u0430\u043c\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c:<\/p>\n<pre><code class=\"bash\">npm init<\/code><\/pre>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041e\u0434\u043d\u0430 \u0438\u0437 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435, \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c tree shaking.<\/p>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a:<\/p>\n<pre><code>- src \/   - components \/     - button \/       - button.vue       - index.ts      - index.ts    - styles \/     - components \/         - _button.scss      - index.scss  - Package.json - rollup.config.js<\/code><\/pre>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438<\/h3>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438. \u041c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c, \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u0442\u043e \u0432 \u0444\u0430\u0439\u043b <code>button.vue<\/code>.<\/p>\n<pre><code class=\"javascript\">&lt;!-- src\/components\/button\/button.vue --> &lt;template>     &lt;button         v-bind=\"$attrs\"         :class=\"rootClasses\"         :type=\"type\"         :disabled=\"computedDisabled\"     >       &lt;slot>&lt;\/slot>     &lt;\/button> &lt;\/template>  &lt;script lang=\"ts\"> import { defineComponent } from 'vue'  export default defineComponent({     name: 'DSButton',     inheritAttrs: false,     props: {         \/**          * disabled status          * @values true, false          *\/         disabled: {             type: Boolean,         },         \/**         * Color of button         * @values primary, secondary         *\/         variant: {             type: String,             validator: (value: string) => {                 return [                     'primary',                     'secondary'                 ].indexOf(value) >= 0             }         },         \/**          * type of button          * @values button, submit          *\/         type: {             type: String,             default: 'button',             validator: (value: string) => {                 return [                     'button',                     'submit',                     'reset'                 ].indexOf(value) >= 0             }         },         \/**          * Size of button          * @values sm, md, lg          *\/         size: {             type: String,             validator: (value: string) => {                 return [                     'sm',                     'md',                     'lg'                 ].indexOf(value) >= 0             }         }     },     computed: {         rootClasses() {             return [                 'ds-button',                 'ds-button--' + this.size,                 'ds-button--' + this.variant             ]         },         computedDisabled() {             if (this.disabled) return true             return null         }     } }) &lt;\/script><\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0444\u0430\u0439\u043b\u0435.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u0442\u043e \u0432 \u0444\u0430\u0439\u043b <code>_button.scss<\/code>.<\/p>\n<pre><code class=\"css\">\/\/ src\/styles\/components\/_button.scss $primary: '#0e34cd'; $secondary: '#b9b9b9'; $white: '#ffffff'; $black: '#000000'; $small: '.75rem'; $medium: '1.25rem'; $large: '1.5rem';  .ds-button {     position: relative;     display: inline-flex;     cursor: pointer;     text-align: center;     white-space: nowrap;     align-items: center;     justify-content: center;     vertical-align: top;     text-decoration: none;     outline: none;      \/\/ variant     &amp;--primary {         background-color: $primary;         color: $white;     }     &amp;--secondary {         background-color: $secondary;         color: $black;     }      \/\/ size     &amp;--sm {         min-width: $small;     }     &amp;--md {         min-width: $medium;     }     &amp;--lg {         min-width: $large;     } }<\/code><\/pre>\n<h2>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h2>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 \u043c\u0435\u0442\u043e\u0434 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438.<\/p>\n<p><code>src\/components\/button\/index.ts<\/code> \u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0412 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0448\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043e\u043d \u0442\u0430\u043a\u0436\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/ src\/components\/button\/index.ts import { App, Plugin } from 'vue'  import Button from '.\/button.vue'  export default {     install(Vue: App) {         Vue.component(Button.name, Button)     } } as Plugin  export {     Button as DSButton }<\/code><\/pre>\n<p><code>src\/components\/index.ts<\/code> \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u044e\u0434\u0430 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u0437 \u043d\u0430\u0448\u0435\u0439 \u043f\u0430\u043f\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438, \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e.<\/p>\n<pre><code class=\"javascript\">\/\/ src\/components\/index.ts import Button from '.\/button'  export {     Button }<\/code><\/pre>\n<p><code>src\/styles\/index.scss<\/code> \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 index.scss \u0432 \u043d\u0430\u0448\u0435\u0439 \u043f\u0430\u043f\u043a\u0435 \u0441\u0442\u0438\u043b\u0435\u0439. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0438\u043c\u0435\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043d\u0430\u0448\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<pre><code class=\"css\">\/\/ src\/styles\/index.scss @import \"components\/_button\";<\/code><\/pre>\n<p><code>src\/index.ts<\/code> \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 <code>index.ts<\/code> \u0432 \u043d\u0430\u0448\u0435\u0439 \u043f\u0430\u043f\u043a\u0435 src. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 \u043c\u0435\u0442\u043e\u0434 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041c\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c <code>DSLibrary<\/code> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<pre><code class=\"javascript\">\/\/ src\/index.ts import { App } from 'vue'  import * as components from '.\/components'  const DSLibrary = {     install(app: App) {         \/\/ Auto import all components         for (const componentKey in components) {             app.use((components as any)[componentKey])         }     } }  export default DSLibrary  \/\/ export all components as vue plugin export * from '.\/components'<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>shim-vue.d.ts<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u043e\u0447\u044c \u043d\u0430\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b Vue \u0432 \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b TypeScript \u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u044b\u0437\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0438 \u043b\u0438\u043d\u0442\u0438\u043d\u0433\u0430.<\/p>\n<pre><code class=\"typescript\">\/\/ src\/shim-vue.d.ts declare module '*.vue' {   import type { DefineComponent } from 'vue';   const component: DefineComponent&lt;{}, {}, any>;   export default component; }<\/code><\/pre>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u0431\u043e\u0440\u043a\u0438<\/h2>\n<p>\u041f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442 \u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 npm, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Rollup. Rollup \u2014 \u044d\u0442\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0434\u043b\u044f JavaScript, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430 \u0432 \u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0435.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 rollup \u0438 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<pre><code class=\"bash\">npm i -D rollup rollup-plugin-vue rollup-plugin-terser rollup-plugin-typescript2 @rollup\/plugin-babel @rollup\/plugin-commonjs @rollup\/plugin-node-resolve<\/code><\/pre>\n<h3>\u0421\u0431\u043e\u0440\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u041a\u043e\u0434 Vue)<\/h3>\n<p>\u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0442\u0438\u043f\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n<ul>\n<li>\n<p>ES module<\/p>\n<\/li>\n<li>\n<p>CommonJS<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>rollup.config.js<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u0442\u0443\u0434\u0430.<\/p>\n<pre><code class=\"javascript\">import { text } from '.\/build\/banner.json' import packageInfo from '.\/package.json'  import vue from 'rollup-plugin-vue' import node from '@rollup\/plugin-node-resolve' import cjs from '@rollup\/plugin-commonjs' import babel from '@rollup\/plugin-babel' import { terser } from 'rollup-plugin-terser' import typescript from 'rollup-plugin-typescript2';  import fs from 'fs' import path from 'path'  const baseFolderPath = '.\/src\/components\/' const banner = text.replace('${version}', packageInfo.version)  const components = fs     .readdirSync(baseFolderPath)     .filter((f) =>         fs.statSync(path.join(baseFolderPath, f)).isDirectory()     )  const entries = {     'index': '.\/src\/index.ts',     ...components.reduce((obj, name) => {         obj[name] = (baseFolderPath + name)         return obj     }, {}) }  const babelOptions = {     babelHelpers: 'bundled' }  const vuePluginConfig = {     template: {         isProduction: true,         compilerOptions: {             whitespace: 'condense'         }     } }  const capitalize = (s) => {     if (typeof s !== 'string') return ''     return s.charAt(0).toUpperCase() + s.slice(1) }  export default () => {     let config = []      if (process.env.MINIFY === 'true') {         config = config.filter((c) => !!c.output.file)         config.forEach((c) => {             c.output.file = c.output.file.replace(\/.m?js\/g, r => `.min${r}`)             c.plugins.push(terser({                 output: {                     comments: '\/^!\/'                 }             }))         })     }     return config }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u0435\u0435 \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>banner.json<\/code>. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443. \u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0443\u0436\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0444\u0430\u0439\u043b <code>rollup.config.js<\/code>, \u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0430\u043a\u0435\u0442\u0430 \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e <code>package.json<\/code> \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<pre><code class=\"json\">{     \"text\": \"\/*! DS Library v${version} *\/ \" }<\/code><\/pre>\n<p>\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0448\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c.<\/p>\n<p><code>entries<\/code>: \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0432 \u043f\u0430\u043a\u0435\u0442. <\/p>\n<p><code>external<\/code>: \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u043f\u0430\u043a\u0435\u0442 Vue.<\/p>\n<p><code>output.format<\/code>: \u0444\u043e\u0440\u043c\u0430\u0442 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435<\/p>\n<p><code>output.dir<\/code>: \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u0434\u043b\u044f \u0431\u0430\u043d\u0434\u043b\u0430<\/p>\n<p><code>output.banner<\/code>: \u0442\u0435\u043a\u0441\u0442, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0444\u0430\u0439\u043b\u0430<\/p>\n<p><code>plugins<\/code>: \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 rollup<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 esm \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435:<\/p>\n<pre><code class=\"javascript\">config = [{   input: entries,   external: ['vue'],   output: {      format: 'esm',      dir: `dist\/esm`,      entryFileNames: '[name].mjs',      chunkFileNames: '[name]-[hash].mjs',   },   plugins: [       node({           extensions: ['.vue', '.ts']       }),       typescript({           typescript: require('typescript')       }),       vue(vuePluginConfig),       babel(babelOptions),       cjs()    ], }],<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0434\u0438\u043d\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 esm \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">config = [     ...,     {        input: 'src\/index.ts',        external: ['vue'],        output: {            format: 'esm',            file: 'dist\/ds-library.mjs',            banner: banner        },        plugins: [            node({                extensions: ['.vue', '.ts']            }),            typescript({                typescript: require('typescript')            }),            vue(vuePluginConfig),            babel(babelOptions),            cjs()        ]    } ],<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 cjs \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435:<\/p>\n<pre><code class=\"javascript\">config = [   ...,   ...,  {      input: entries,      external: ['vue'],      output: {          format: 'cjs',          dir: 'dist\/cjs',          exports: 'named'      },      plugins: [          node({              extensions: ['.vue', '.ts']          }),          typescript({              typescript: require('typescript')          }),          vue(vuePluginConfig),          babel(babelOptions),          cjs()     ]  } ],<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0434\u0438\u043d\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 cjs \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435.<\/p>\n<pre><code class=\"javascript\">config = [   ...,   ...,   ...,  {      input: 'src\/index.ts',      external: ['vue'],      output: {          format: 'umd',          name: capitalize('ds-library'),          file: 'dist\/ds-library.js',          exports: 'named',          banner: banner,          globals: {              vue: 'Vue'          }      },      plugins: [          node({              extensions: ['.vue', '.ts']          }),          typescript({              typescript: require('typescript')          }),          vue(vuePluginConfig),          babel(babelOptions),          cjs()      ]  } ],<\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448 package.json \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u043a\u0440\u0438\u043f\u0442\u0430. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u043a\u0430\u043a <code>rimraf<\/code> (\u0447\u0442\u043e\u0431\u044b \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043d\u0430\u0448\u0443 \u0441\u0442\u0430\u0440\u0443\u044e \u043f\u0430\u043f\u043a\u0443 dist \u043f\u0435\u0440\u0435\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430), \u0442\u0430\u043a \u0438 <code>clean-css<\/code> (\u0447\u0442\u043e\u0431\u044b \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u0444\u0430\u0439\u043b css), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c:<\/p>\n<pre><code class=\"bash\">npm i -D rimraf clean-css-cli<\/code><\/pre>\n<p>\u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u043d\u0430\u0448 \u0441\u043a\u0440\u0438\u043f\u0442 <code>package.json<\/code><\/p>\n<p><code>build:vue<\/code> = rollup \u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<code>build:style<\/code> = \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043b \u043d\u0430\u0448\u0438 \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 scss \u0432 css, \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0442\u0435\u043a\u0441\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u0430\u043d\u043d\u0435\u0440\u0430 (\u043d\u043e\u043c\u0435\u0440 \u0432\u0435\u0440\u0441\u0438\u0438, \u043a\u0430\u043a \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432\u044b\u0448\u0435) \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b \u0432 <code>dist\/ds-library.css<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043b \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e.<\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0431\u0430\u043d\u043d\u0435\u0440\u0430 \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435 css \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b <code>print-banner.js<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0430\u043f\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0438. \u041e\u043d \u0431\u0435\u0440\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u0430\u043d\u043d\u0435\u0440\u0430 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u0444\u0430\u0439\u043b.<\/p>\n<pre><code class=\"javascript\">\/\/ build\/print-banner.js const packageInfo = require('..\/package.json') const { text } = require('.\/banner.json')  process.stdout.write(text.replace('${version}', packageInfo.version)) process.stdin.pipe(process.stdout)<\/code><\/pre>\n<p><code>build:lib<\/code> = \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043f\u0430\u043f\u043a\u0443 dist, \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u0434 vue \u0438 \u0441\u0442\u0438\u043b\u0438, <code>publish:lib<\/code> = \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 build lib, \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0432 npm<\/p>\n<pre><code class=\"json\">\"scripts\": {     \"build:vue\": \"rollup -c &amp;&amp; rollup -c --environment MINIFY\",     \"build:vue:watch\": \"rollup -c --watch\",     \"build:style\": \"sass --no-charset .\/src\/styles\/index.scss | node .\/build\/print-banner.js > dist\/ds-library.css &amp;&amp; cleancss -o dist\/ds-library.min.css dist\/ds-library.css\",     \"build:lib\": \"rimraf dist &amp;&amp; npm run build:vue &amp;&amp; npm run build:style\",     \"publish:lib\": \"npm run build:lib &amp;&amp; npm publish\" }, \"peerDependencies\": {    \"vue\": \"^3.0.0\" },<\/code><\/pre>\n<h2>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0432 npm<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0432 <code>npm link<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0432 <code>npm link \u00ab\u0438\u043c\u044f \u043f\u0430\u043a\u0435\u0442\u0430\u00bb<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u043c \u043f\u0430\u043a\u0435\u0442\u0435.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c <code>npm publish:lib<\/code> \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0432 npm.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/678274\/\"> https:\/\/habr.com\/ru\/post\/678274\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 Adesoji Temitope &#171;<a href=\"https:\/\/www.thisdot.co\/blog\/how-to-create-and-deploy-a-vue-component-library-to-npm\" rel=\"noopener noreferrer nofollow\">How to Create and Deploy a Vue Component Library to NPM<\/a>&#171;<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0432\u0435\u0434\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b \u201c<a href=\"https:\/\/t.me\/frontend_pasta\" rel=\"noopener noreferrer nofollow\"><u>Frontend \u043f\u043e-\u0444\u043b\u043e\u0442\u0441\u043a\u0438<\/u><\/a>\u201d, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438\u0437 \u043c\u0438\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 Vue, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u043c\u0438 \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435 \u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438\u043c\u0435\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u0430\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0448\u0430\u0433\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Vue \u0432 npm, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<ul>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Vue.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0432 npm.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Vue<\/h2>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Vue. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c yarn \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0430\u043a\u0435\u0442\u0430\u043c\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c:<\/p>\n<pre><code class=\"bash\">npm init<\/code><\/pre>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041e\u0434\u043d\u0430 \u0438\u0437 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435, \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c tree shaking.<\/p>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a:<\/p>\n<pre><code>- src \/   - components \/     - button \/       - button.vue       - index.ts      - index.ts    - styles \/     - components \/         - _button.scss      - index.scss  - Package.json - rollup.config.js<\/code><\/pre>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438<\/h3>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438. \u041c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c, \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u0442\u043e \u0432 \u0444\u0430\u0439\u043b <code>button.vue<\/code>.<\/p>\n<pre><code class=\"javascript\">&lt;!-- src\/components\/button\/button.vue --> &lt;template>     &lt;button         v-bind=\"$attrs\"         :class=\"rootClasses\"         :type=\"type\"         :disabled=\"computedDisabled\"     >       &lt;slot>&lt;\/slot>     &lt;\/button> &lt;\/template>  &lt;script lang=\"ts\"> import { defineComponent } from 'vue'  export default defineComponent({     name: 'DSButton',     inheritAttrs: false,     props: {         \/**          * disabled status          * @values true, false          *\/         disabled: {             type: Boolean,         },         \/**         * Color of button         * @values primary, secondary         *\/         variant: {             type: String,             validator: (value: string) => {                 return [                     'primary',                     'secondary'                 ].indexOf(value) >= 0             }         },         \/**          * type of button          * @values button, submit          *\/         type: {             type: String,             default: 'button',             validator: (value: string) => {                 return [                     'button',                     'submit',                     'reset'                 ].indexOf(value) >= 0             }         },         \/**          * Size of button          * @values sm, md, lg          *\/         size: {             type: String,             validator: (value: string) => {                 return [                     'sm',                     'md',                     'lg'                 ].indexOf(value) >= 0             }         }     },     computed: {         rootClasses() {             return [                 'ds-button',                 'ds-button--' + this.size,                 'ds-button--' + this.variant             ]         },         computedDisabled() {             if (this.disabled) return true             return null         }     } }) &lt;\/script><\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0444\u0430\u0439\u043b\u0435.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u044d\u0442\u043e \u0432 \u0444\u0430\u0439\u043b <code>_button.scss<\/code>.<\/p>\n<pre><code class=\"css\">\/\/ src\/styles\/components\/_button.scss $primary: '#0e34cd'; $secondary: '#b9b9b9'; $white: '#ffffff'; $black: '#000000'; $small: '.75rem'; $medium: '1.25rem'; $large: '1.5rem';  .ds-button {     position: relative;     display: inline-flex;     cursor: pointer;     text-align: center;     white-space: nowrap;     align-items: center;     justify-content: center;     vertical-align: top;     text-decoration: none;     outline: none;      \/\/ variant     &amp;--primary {         background-color: $primary;         color: $white;     }     &amp;--secondary {         background-color: $secondary;         color: $black;     }      \/\/ size     &amp;--sm {         min-width: $small;     }     &amp;--md {         min-width: $medium;     }     &amp;--lg {         min-width: $large;     } }<\/code><\/pre>\n<h2>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h2>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 \u043c\u0435\u0442\u043e\u0434 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438.<\/p>\n<p><code>src\/components\/button\/index.ts<\/code> \u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0412 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0448\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043e\u043d \u0442\u0430\u043a\u0436\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/ src\/components\/button\/index.ts import { App, Plugin } from 'vue'  import Button from '.\/button.vue'  export default {     install(Vue: App) {         Vue.component(Button.name, Button)     } } as Plugin  export {     Button as DSButton }<\/code><\/pre>\n<p><code>src\/components\/index.ts<\/code> \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u044e\u0434\u0430 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u0437 \u043d\u0430\u0448\u0435\u0439 \u043f\u0430\u043f\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438, \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e.<\/p>\n<pre><code class=\"javascript\">\/\/ src\/components\/index.ts import Button from '.\/button'  export {     Button }<\/code><\/pre>\n<p><code>src\/styles\/index.scss<\/code> \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 index.scss \u0432 \u043d\u0430\u0448\u0435\u0439 \u043f\u0430\u043f\u043a\u0435 \u0441\u0442\u0438\u043b\u0435\u0439. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0438\u043c\u0435\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043d\u0430\u0448\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<pre><code class=\"css\">\/\/ src\/styles\/index.scss @import \"components\/_button\";<\/code><\/pre>\n<p><code>src\/index.ts<\/code> \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 <code>index.ts<\/code> \u0432 \u043d\u0430\u0448\u0435\u0439 \u043f\u0430\u043f\u043a\u0435 src. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 \u043c\u0435\u0442\u043e\u0434 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041c\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c <code>DSLibrary<\/code> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<pre><code class=\"javascript\">\/\/ src\/index.ts import { App } from 'vue'  import * as components from '.\/components'  const DSLibrary = {     install(app: App) {         \/\/ Auto import all components         for (const componentKey in components) {             app.use((components as any)[componentKey])         }     } }  export default DSLibrary  \/\/ export all components as vue plugin export * from '.\/components'<\/code><\/pre>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>shim-vue.d.ts<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u043e\u0447\u044c \u043d\u0430\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b Vue \u0432 \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b TypeScript \u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0435 \u0432\u044b\u0437\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0438 \u043b\u0438\u043d\u0442\u0438\u043d\u0433\u0430.<\/p>\n<pre><code class=\"typescript\">\/\/ src\/shim-vue.d.ts declare module '*.vue' {   import type { DefineComponent } from 'vue';   const component: DefineComponent&lt;{}, {}, any>;   export default component; }<\/code><\/pre>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0441\u0431\u043e\u0440\u043a\u0438<\/h2>\n<p>\u041f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442 \u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 npm, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Rollup. Rollup \u2014 \u044d\u0442\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0434\u043b\u044f JavaScript, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430 \u0432 \u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0435.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 rollup \u0438 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<pre><code class=\"bash\">npm i -D rollup rollup-plugin-vue rollup-plugin-terser rollup-plugin-typescript2 @rollup\/plugin-babel @rollup\/plugin-commonjs @rollup\/plugin-node-resolve<\/code><\/pre>\n<h3>\u0421\u0431\u043e\u0440\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u041a\u043e\u0434 Vue)<\/h3>\n<p>\u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0442\u0438\u043f\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n<ul>\n<li>\n<p>ES module<\/p>\n<\/li>\n<li>\n<p>CommonJS<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>rollup.config.js<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u0442\u0443\u0434\u0430.<\/p>\n<pre><code class=\"javascript\">import { text } from '.\/build\/banner.json' import packageInfo from '.\/package.json'  import vue from 'rollup-plugin-vue' import node from '@rollup\/plugin-node-resolve' import cjs from '@rollup\/plugin-commonjs' import babel from '@rollup\/plugin-babel' import { terser } from 'rollup-plugin-terser' import typescript from 'rollup-plugin-typescript2';  import fs from 'fs' import path from 'path'  const baseFolderPath = '.\/src\/components\/' const banner = text.replace('${version}', packageInfo.version)  const components = fs     .readdirSync(baseFolderPath)     .filter((f) =>         fs.statSync(path.join(baseFolderPath, f)).isDirectory()     )  const entries = {     'index': '.\/src\/index.ts',     ...components.reduce((obj, name) => {         obj[name] = (baseFolderPath + name)         return obj     }, {}) }  const babelOptions = {     babelHelpers: 'bundled' }  const vuePluginConfig = {     template: {         isProduction: true,         compilerOptions: {             whitespace: 'condense'         }     } }  const capitalize = (s) => {     if (typeof s !== 'string') return ''     return s.charAt(0).toUpperCase() + s.slice(1) }  export default () => {     let config = []      if (process.env.MINIFY === 'true') {         config = config.filter((c) => !!c.output.file)         config.forEach((c) => {             c.output.file = c.output.file.replace(\/.m?js\/g, r => `.min${r}`)             c.plugins.push(terser({                 output: {                     comments: '\/^!\/'                 }             }))         })     }     return config }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u0435\u0435 \u0444\u0430\u0439\u043b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>banner.json<\/code>. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443. \u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0443\u0436\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0444\u0430\u0439\u043b <code>rollup.config.js<\/code>, \u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u0430\u043a\u0435\u0442\u0430 \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e <code>package.json<\/code> \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<pre><code class=\"json\">{     \"text\": \"\/*! DS Library v${version} *\/ \" }<\/code><\/pre>\n<p>\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0448\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c.<\/p>\n<p><code>entries<\/code>: \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0432 \u043f\u0430\u043a\u0435\u0442. <\/p>\n<p><code>external<\/code>: \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u043f\u0430\u043a\u0435\u0442 Vue.<\/p>\n<p><code>output.format<\/code>: \u0444\u043e\u0440\u043c\u0430\u0442 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435<\/p>\n<p><code>output.dir<\/code>: \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u0434\u043b\u044f \u0431\u0430\u043d\u0434\u043b\u0430<\/p>\n<p><code>output.banner<\/code>: \u0442\u0435\u043a\u0441\u0442, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0444\u0430\u0439\u043b\u0430<\/p>\n<p><code>plugins<\/code>: \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 rollup<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 esm \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435:<\/p>\n<pre><code class=\"javascript\">config = [{   input: entries,   external: ['vue'],   output: {      format: 'esm',      dir: `dist\/esm`,      entryFileNames: '[name].mjs',      chunkFileNames: '[name]-[hash].mjs',   },   plugins: [       node({           extensions: ['.vue', '.ts']       }),       typescript({           typescript: require('typescript')       }),       vue(vuePluginConfig),       babel(babelOptions),       cjs()    <\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-336019","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/336019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=336019"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/336019\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=336019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=336019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=336019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}