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>
 ...
 </p>
</template>

<script>
 export default {
  name: &#39;vue-flag-list&#39;,
  ...
 }
</script>

<style>
 ...
</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를 컴포넌트 라이브러리에 패키징하면 안 됩니다. 하지만 패키지된 컴포넌트 라이브러리를 <script> 태그 형식으로 직접 가져오면 정상적으로 실행되지 않고 vue가 정의되지 않았다는 메시지가 표시됩니다. <br/></script>

<script> 태그 형식의 구성 요소를 사용하면 Vue를 가져오는 데도 <script> 태그가 사용됩니다. Vue에서 가져온 변수는 "window.vue"가 아닌 "window.Vue"이므로 vue가 정의되지 않았습니다 오류가 발생합니다. </script>

그래서 webpack.prod.conf.js에서 외부 항목을 다음과 같이 구성해야 합니다.

externals: {
 vue: {
  root: 'Vue',
  commonjs: 'vue',
  commonjs2: 'vue',
  amd: 'vue'
 }
 },

또한 CSS를 파일로 패키징하려면 webpack.prod.conf에서 플러그인 옵션을 변경해야 합니다. .js

new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
 }),

수정:

new ExtractTextPlugin({
  filename: 'vue-flag-list.min.css'
 }),

항목 파일 수정

entry: {
 app: './src/index.js'
 },

1.5 디렉터리 구조를 구성합니다. 내 디렉터리 구조는 다음과 같습니다.

- vue-flag-list
 + build
 + dist
 - src
 + img
 index.js
 Vue-Flag-List.vue
 ...

둘째, npm을 사용하여 패키지를 게시합니다

공식 패키지를 보내기 전에 로컬에서 패키지를 만든 다음 문제가 있는지 테스트하여 문제가 없으면 npm에 게시할 수 있습니다.

2.1은

npm build
npm pack

npm 팩을 사용하여 로컬로 패키징되며 vue-flag-list-1.0.0.tgz 파일이 현재 디렉터리에 생성됩니다.

새 vue 프로젝트를 열고 현재 경로('path'는 파일의 위치를 ​​나타냄)에서 실행합니다. component

cnpm install 路径/vue-flag-list-1.0.0.tgz

2.2 Publish to npm

1. npm 공식 홈페이지에서 npm 계정을 등록하세요

2. 패키징할 프로젝트의 루트 디렉터리로 이동한 후 npm 계정에 로그인하고 사용자 이름을 입력하세요. , 비밀번호, 이메일 주소

import VueFlagList from 'vue-flag-list'
import 'vue-flag-list/dist/vue-flag-list.min.css'

Vue.use(VueFlagList)

3. 마지막 단계는 npm 실행입니다. 그냥 게시하세요

<flagcode></flagcode>

methos: {
 getCode(code) {
  console.log(code)
 }
}

3. Postscript

오랜 고민 끝에 드디어 vue-flag-list 플러그인의 프로토타입을 공개했습니다. . 이것은 매우 간단한 플러그인입니다. 앞으로도 계속해서 유지하고 더 많은 실용적인 기능을 추가하겠습니다.

npm unpublish --force: 게시된 패키지 제거(패키지의 지정된 버전을 제거할 수도 있음)

• npm logout: 사용자 로그아웃

• 관련 권장 사항:

jQuery 캡슐화된 페이징 컴포넌트 상세설명

자바스크립트 시뮬레이션 구현 encapsulation의 3가지 방법과 작성방법

php encapsulation 검색 클래스 예시

위 내용은 vue를 사용하여 플러그인을 캡슐화하고 npm에 게시하는 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!