Detailed example of using vue to encapsulate the plug-in and publish it to npm

This article mainly introduces the method and steps of using vue to encapsulate the plug-in and publish it to npm. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. National area code list based on vue

vue-flag-list contains the area codes of most countries. Click the triangle on the right to expand the list to select the national area code. If there is no area code in the list, You can also enter the area code yourself.

Global area code list

1.1 Initialization component

Use vue-cli to initialize the component, although there are many things No, because I’m familiar with this, I’ll just follow this step.

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

1.2 Implement specific functions according to your own needs. My main functions are written in the vue-flag-list.vue component.

<template>
 <p>
 ...
 </p>
</template>

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

<style>
 ...
</style>

After the function is written, modify the package.json and other configuration files to prepare for packaging and release

1.3 Add 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 Modify the configuration file

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 file

Because you need to use the dist folder, remove dist/ in the .gitignore file.

1.4.3 webpack.prod.conf.js file

In order to support multiple usage scenarios, we need to choose an appropriate packaging format. Common packaging formats include CMD, AMD, and UMD. CMD can only be executed in the Node environment, AMD can only be executed in the browser, and UMD supports both execution environments. Obviously, we should choose UMD format. The setting item that specifies the output format in Webpack is output.libraryTarget. The supported formats are:

• "var" - output in the form of a variable: var Library = xxx (default);

• "this" - output as an attribute of this: this["Library"] = xxx;

• "commonjs" - output as an attribute of exports An attribute output: exports["Library"] = xxx;

• "commonjs2" - output in the form of module.exports: module.exports = xxx;

• "amd" - Output in AMD format;

• "umd" - Output in AMD, CommonJS2 and global properties simultaneously.

The following is an example of output settings in webpack.prod.conf.js:

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

Vue is an external dependency of the component library. Users of the component library will import Vue by themselves. When packaging, Vue should not be packaged into the component library. However, if you introduce the packaged component library directly in the form of <script> tag, you will find that it cannot be executed normally and prompts that vue is undefined. <br/></script>

When using a component in the form of a <script> tag, the <script> tag will also be used to import Vue. The variable imported by Vue is "window.Vue" instead of "window.vue", so vue is not defined error will occur. </script>

So, we need to configure externals in webpack.prod.conf.js, as follows:

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

In addition, in order to package css into a file, webpack.prod.conf. Change the

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

of the plugins option in js to

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

Modify the entry file

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

1.5 Organize the directory structure. My directory structure is as follows:

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

2. Use npm to publish a package

Before sending the official package, you can make a package locally, and then test whether there are any problems. If there are no problems, publish it to npm.

2.1 After packaging it locally using

npm build
npm pack

npm pack, the vue-flag-list-1.0.0.tgz file will be generated in the current directory.

Open a new vue project and execute it under the current path ('path' indicates the location of the file)

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

Introduce ## into the entry file (main.js) of the new project #

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

Vue.use(VueFlagList)

Use in components

<flagcode></flagcode>

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

2.2 Publish to npm

1. Register an npm account on the npm official website

2. Switch to the root of the project that needs to be packaged Directory, log in to your npm account, enter your username, password, and email

npm login

3. The last step is to execute npm publish

# lin@lin-Pro in ~/www/vue-flag-list on git:master $ npm publish
# lin@lin-Pro in ~/www/vue-flag-list on git:master $ + vue-flag-list@1.0.0

3. Postscript

It took a long time , finally released the prototype of the vue-flag-list plug-in. This is a very simple plug-in. We will continue to maintain it and add more practical functions in the future.

• npm unpublish --force: Remove a release package (you can also remove a specified version of the package)

• npm logout: Log out User

Related recommendations:

Detailed explanation of jQuery encapsulated paging component

Three ways to implement encapsulation through JavaScript simulation Method and writing

php encapsulation search class example

The above is the detailed content of Detailed example of using vue to encapsulate the plug-in and publish it to npm. For more information, please follow other related articles on the PHP Chinese website!