用vue封装插件并发布到npm的方法步骤

用vue封装插件并发布到npm的方法步骤

一、基于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组件中。

...

功能写好后，修改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 (default)；

“this” - 以 this 的一个属性输出： this[“Library”] = xxx；

“commonjs” - 以 exports 的一个属性输出：exports[“Library”] = xxx；

“commonjs2” - 以 module.exports 形式输出：module.exports = xxx；

“amd” - 以 AMD 格式输出；

“umd” - 同时以 AMD、CommonJS2 和全局属性形式输出。

以下是 webpack.prod.conf.js 中 output 设置的示例：

output: {

path: path.resolve(__dirname, '../dist'),

publicPath: '',

filename: 'vue-flag-list.min.js',

library: 'VueFlagList',

libraryTarget: 'umd',

umdNamedDefine: true

},

Vue 是组件库的外部依赖。组件库的使用者会自行导入 Vue，打包的时候，不应该将 Vue 打包进组件库。但是，如果你将打包后的组件库以

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。