vue를 사용하여 플러그인을 캡슐화하고 npm에 게시하는 자세한 예

이 글에서는 Vue를 사용하여 플러그인을 캡슐화하고 npm에 게시하는 방법과 단계를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. Vue 기반 국가 지역 코드 목록

vue-flag-list에는 국가 지역 코드가 없는 경우 오른쪽의 삼각형을 클릭하여 목록을 확장할 수 있습니다. 목록에서 지역번호를 직접 입력할 수도 있습니다.

글로벌 지역 코드 목록

1.1 초기화 구성 요소

는 vue-cli를 사용하여 구성 요소를 초기화합니다. 비록 필요하지 않은 것들이 많지만 익숙하기 때문에 이 단계를 따릅니다.

vue init webpack vue-flag-list
cd vue-flag-list
cnpm install 
npm run dev

1.2 필요에 따라 특정 기능을 구현하세요. 주요 기능은 vue-flag-list.vue 구성 요소에 작성되어 있습니다.

<template>
 <p id="flag">
 ...
 </p>
</template>

<script>
 export default {
  name: 'vue-flag-list',
  ...
 }
</script>

<style scoped>
 ...
</style>

함수 작성 후 package.json 및 기타 구성 파일을 수정하여 패키징 및 릴리스 준비

1.3 index.js 추가

import flagComponent from './Vue-Flag-List.vue'

const VueFlagList = {
 install: function (Vue) {
 if (typeof window !== 'undefined' && window.Vue) {
  Vue = window.Vue
 }
 Vue.component('VueFlagList', flagComponent)
 }
}

export default VueFlagList

1.4 구성 파일 수정

1.4.1 package.json

{
 "name": "vue-flag-list",
 "version": "1.0.0",
 "description": "A vue plugin for entering and selecting area code",
 "author": "guimin",
 // 因为组件包是公用的，所以private为false
 "private": false,
 // 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径
 "main": "dist/vue-flag-list.min.js", 
 "scripts": {
 "dev": "node build/dev-server.js",
 "start": "node build/dev-server.js",
 "build": "node build/build.js"
 },
 // 指定代码所在的仓库地址
 "repository": {
 "type": "git",
 "url": "git+https://github.com/linmoer/vue-flag-list.git"
 },
 // 指定打包之后，包中存在的文件夹
 "files": [
 "dist",
 "src"
 ],
 // 指定关键字
 "keywords": [
 "vue",
 "flag",
 "code",
 "flag code"
 ],
 "license": "MIT", //开源协议
 // 项目官网的url
 "homepage": "https://github.com/linmoer/vue-flag-list#readme",
 "dependencies": {
 "vue": "^2.3.3"
 },
 "devDependencies": {
 ...
 },
 "engines": {...},
 "browserslist": [...]
}

1.4.2.gitignore 파일

dist 폴더를 사용해야 하므로 .gitignore 파일에서 dist/를 제거하세요.

1.4.3 webpack.prod.conf.js 파일

다양한 사용 시나리오를 지원하려면 적절한 패키징 형식을 선택해야 합니다. 일반적인 패키징 형식에는 CMD, AMD 및 UMD가 포함되며, CMD는 Node 환경에서만 실행할 수 있고, AMD는 브라우저에서만 실행할 수 있으며, UMD는 두 실행 환경을 모두 지원합니다. 당연히 UMD 형식을 선택해야 합니다. Webpack에서 출력 형식을 지정하는 설정 항목은 output.libraryTarget입니다. 지원되는 형식은 다음과 같습니다.

• "var" - 변수로 출력: var Library = xxx(기본값)

• "this" - as 이것의 속성으로 출력: this["Library"] = xxx;

• "commonjs" - 내보내기의 속성으로 출력: imports["Library"] = xxx;

• "commonjs2" - 모듈로 . 내보내기 형식 출력: module.exports = xxx;

• "amd" - AMD 형식으로 출력

• "umd" - 동시에 AMD, CommonJS2 및 전역 속성 형식으로 출력.

다음은 webpack.prod.conf.js의 출력 설정 예입니다.

 output: {
 path: path.resolve(__dirname, '../dist'),
 publicPath: '',
 filename: 'vue-flag-list.min.js',
 library: 'VueFlagList',
 libraryTarget: 'umd',
 umdNamedDefine: true
 },

Vue는 컴포넌트 라이브러리의 외부 종속성입니다. 컴포넌트 라이브러리 사용자는 Vue를 직접 가져와서 패키징할 때 Vue를 컴포넌트 라이브러리에 패키징하면 안 됩니다. 하지만 패키지된 컴포넌트 라이브러리를