자기소개

@coppieee
ㅡㅡㅡㅜㅜㅜㅜㅜㅜ 이 m
프리랜서 프로그래머
Vue.js, TypeScript, Serverless, Cordova 등이 있습니다.

Vue.js 구성 요소 라이브러리를 만들었습니다.

Vue.js에서 Material Design하고 싶어서 Vuetify나 Vue Material이나 라이브러리를 만져 보았지만,
CSS등 여러가지 커스터마이즈해 괴롭다.
그래서 Material Design의 공부도 겸하고, Material Design의 자작 라이브러리를 만들어 npm에 공개했습니다.
npm 공개 작업은 상당히 쉽게 할 수 있었으므로 npm publish의 방법을 공유합니다.

npm에서 공개한 것

Vuterial

Material Design을 위한 Vue.js 컴포넌트 라이브러리.
Materail Conponents for Web을 사용해 구현하고 있다.

htps : // 기주 b. 코 m / 코피 에에 / ゔ 테리아 l
ㅡㅡㅡㅜㅜㅜㅜㅜㅜㅜ 기주 b. 이오 / ㄔ 테리아 l /

샘플 (문서 페이지)

구성 요소를 npm publish하여 게시하는 단계

Vue CLI 3에서 프로젝트 만들기

빌드 설정

package.json 설정

npmjs에 가입

npm publish

Vue CLI 3에서 프로젝트 만들기

라이브러리를 만들 때 웹 앱과 만드는 것처럼 Vue CLI에서 만들 수 있습니다.

$ npm i -g @vue/cli
$ vue create your-library-name

특히 라이브러리용으로 특별한 설정은 필요 없기 때문에 자신이 좋아하는 대로 설정하자.
라이브러리명은 이름이 쓰여 있지 않은가 음 pmjs. 작은 m 로 체크해 둡시다.

빌드 설정

라이브러리의 빌드는 vue-cli-service 에 라이브러리 생성용의 빌드 옵션이 있으므로 그것을 사용한다.

$ vue-cli-service build --target lib --name your-library-name ./lib-main.js

그것을 package.json 의 scripts 에 build-bundle 등 적당한 이름으로 설정해 두면 좋을 것입니다.

package.json

{
  "scripts":[
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-bundle": "vue-cli-service build --target lib --name your-library-name ./src/lib-main.js",
    ...
  ]
}

빌드 결과

$ npm run build-bundle

./dist 폴더에 다음 파일이 출력됨

./dist

your-library-name.common.js
your-library-name.common.js.map
your-library-name.css
your-library-name.umd.js
your-library-name.umd.js.map
your-library-name.umd.min.js
your-library-name.umd.min.js.map

js와 css를 생성합니다.
WebPack등에서 사용하는 경우는 common.js, 브라우저로 직접 읽어들이는 경우는 umd.js를 사용하게 된다.
라이브러리의 생성까지 하나의 커멘드로 해 주는 Vue CLI 3는 굉장히.

라이브러리 구현 예

이번에는 Vue 플러그인으로 사용하는 설정을 하고 있다.
라이브러리 사용자는 Vue.use(libraryName) 의 형식으로 사용하게 된다. 다음 예.

lib-main.js

import { mdcChip } from './components/mdc-chip.vue'
import { mdcCard } from './components/mdc-card.vue'
import { mdcButton } from './components/mdc-button.vue'
// ...
export default const YourLibraryName = {
  install(Vue, options){
    const components = {
      mdcButton,　// <mdc-button/> として使える
      mdcCard, // <mdc-card/> として使える
      // ...
    }
    for(const [name,c] of Object.entries(components)){
        Vue.component(name,c)
    }
  },
} 

package.json 설정

package.json

{
  "name": "your-library-name",
  "version": "0.1.0",
  "main":"dist/your-library-name.common.js", // エントリーポイント
  "unpkg": "./dist/your-library-name.umd.min.js", // CDN用(オプション)
  "jsdelivr": "./dist/your-library-name.umd.min.js", //CDN用(オプション)
  "typings":"dist/types/index.d.ts", //typescript用型ファイル(オプション)
  "license": "MIT",
  "author": "your name",
  "files": [
    "dist" // npm publish 対象のフォルダ
  ],
  "dependencies": {}, // distのみ公開の場合はdependenciesの中は空でOK
  "peerDependencies": { // 依存しているライブラリ(オプション)
    "vue": "^2.6.6",
    "vue-router": "^3.0.2"
  },
  "private": false,
  ...
}

npm publish에 필요한 설정은 main에 엔트리 포인트의 경로 설정과, files로 npm에 업하는 대상을 설정한다.
private을 false로.
dependencies에는 dist만을 공개하는 경우는 아무것도 쓰지 않아도 된다.
필요 최소한의 설정은 그것만으로 나머지는 옵션.

덧붙여서 아래의 파일은, files에 지정하지 않아도 자동적으로 업된다.

package.json

README

CHANGELOG

LICENSE/LICENCE

unpkg와 jsdelivr는 CDN 배포용이며, 설정하면 각각https://unpkg.com/your-library-name@latesthttps://cdn.jsdelivr.net/npm/your-library-name@latest라는 URL로 js 파일에 액세스 할 수있게된다.
html의 script 태그의 src로 직접 읽는 방식이다.

그 밖에도 여러가지 설정이 있지만, github에 공개되고 있는 vu라든지 vuetify라든지의 package.json을 보면 참고가 된다.

npm login

빌드 설정이 끝나면 다음은 드디어 npm에 공개하는 작업이다.
npm에 대한 계정을 만든 다음 콘솔에서 로그인합니다.

npm 가입

npm login

$ npm login

npm publish

$ npm run build-bundle
$ npm publish

npm 공개 완료

https://www.npmjs.com/package/your-package-name 와 같은 URL로 공개 확인할 수 있다.

npm install example

npm에 게시할 수 있으면 프로젝트를 만들고 npm install을 해보자.

$ vue create my-project
$ cd vmy-project
$ npm i your-library-name

라이브러리 가져오기

라이브러리를 import하고 Vue.use()로 설정한다.
또, css도 사용하는 경우는 별도 import.

main.js

import Vue from 'vue'
import YourLibraryName from 'your-library-name'
import 'your-library-name/dist/your-library-name.css'
Vue.use(YourLibraryName)

　정리

Vue 구성 요소를 npm에 게시하는 경우에도 Vue CLI 3를 사용하면 간단합니다.