vue를 사용하여 플러그인을 캡슐화하고 npm에 게시하는 자세한 예
- 小云云원래의
- 2018-01-09 15:16:472041검색
이 글에서는 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: 'vue-flag-list',
...
}
</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: 사용자 로그아웃
관련 권장 사항:
자바스크립트 시뮬레이션 구현 encapsulation의 3가지 방법과 작성방법
위 내용은 vue를 사용하여 플러그인을 캡슐화하고 npm에 게시하는 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!