Method steps with VUE package plug-in and publishes NPM

First, based on the list of country code vue

vue-flag-list includes the area code in most countries, click on the right side of the triangle to expand the list can choose the country code, if the list no area code, you can enter your own area code.

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

Global list of area codes

1.1 initialization component

using a vue-cli to initialize components, although there are a lot of things do not need to, because the more familiar, they still comply with this process.

  vue init webpack vue-flag-listcd vue-flag-listcnpm install npm run dev  

1.2 according to their needs and achieve specific functions, my main function written in vue-flag-list.vue assembly.

   
...
export default {name: 'vue-flag-list',. ..} ...

after the write function, modify the configuration file package.json like, to release packaged preparation

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 Modifying the configuration file

1.4.1 package.json

{“Name”: “VUE -flag-list “,” 1.0.0 “,” Description “:” a Vue Plugin for Entering and Selecting Area Code “,” Author “:” Guimin “, // Because component packs are public, Private is false “private”: false, // configures the main node, if not configured, we don’t have to reference the import xx from ‘Package in other items, only with the package name as the starting point to specify a relative path “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 “}, // Specify the warehouse address” repository “: {” Type “:” git “,” URL “:” git + https: // git + https: // Gith Bu .com / linmoer / vue-flag-list.git “}, // designatedAfter packing, the folder “files” existing in the package: [“dist”, “src”], // Specify keyword “keywords”: [“Vue”, “Flag”, “Code”, “Flag code”] “license”: “mit”, // open source protocol // project official website 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 want to use the Dist folder, DIST / removed in the .gitignore file.

1.4.3 WebPack.Prod.conf.js file

In order to support a variety of use scenarios, we need to select the appropriate package format. Common packaging formats include CMD, AMD, UMD, and CMD can only be executed in the Node environment, and AMD can only be executed on the browser, and UMD supports two execution environments. Obviously, we should choose the UMD format. The setting item specified in the output format in WebPack is Output.libraryTarget, its supported format is:

“VAR” – output in a variable: var library = xxx (default);

“THIS” – output with one attribute: this [“library”] = xxx;

    “Commonjs “- Output with Exports: Exports [” library “] = xxx;
  • ” CommONJS2 “- output in module.exports: module.exports = xxx;
  • ” AMD “- Output in AMD format;
  • ” UMD “- Output in the form of AMD, CommonJS2, and global attributes.
  • The following is Output settings in WebPack.Prod.conf.js. Example:
Output: {path: path.resolve (__ DIRNAME, ‘../dist’), publicPath: ”, filename: ‘Vue-flag-list. Min.js’, library: ‘vueflaglist’, librarytarget: ‘umd’, umdnameddefine: true},

VUE is the external dependence of the component library. Component library You will be introduced to Vue it yourself. When you pack it, you should not pack the component library. However, if you will be introduced directly after the packaged component library is
tab, you will find that it does not execute it, prompts VUE undefined.
 When using components in the  tag, the  tag is used to import Vue.Vue imported variables "window.Vue" instead of "window.Vue", therefore VUE undefined error. 
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 pack CSS into a file, you need to put the PLUGINS option in WebPack.Prod.conf.js

 New ExtractTextPlugin ({FileName: Utils. Assetspath ('CSS / [Name]. [ContentHash] .css')}),   
Modified to

New ExtractTextPlugin ({filename: ‘Vue-flag-list.min.css’}),
  Modify the entry file  

Entry: {app: ‘},

1.5 Structures the directory structure, my directory structure is as follows:
   - VUE-FLAG-LIST + Build + Dist - SRC + IMG INDEX.JS Vue-Flag-list.Vue ... 

Second, use NPM to release a package
 You can first play a package in the local packet, and then there is no problem, if No problem is released to NPM.  

NPM BuildnPM PACK

  After NPM Pack, you will generate file-flag-list-1.0.0.tgz files in the current directory.  
Open a new Vue project, executed under the current path (‘path’ indicating the location of the file)

CNPM INSTALL path / Vue-Flag -LIST-1.0.0.TGZ

Introduced in the entrance file of the new project

Import Vueflaglist from ‘Vue-Flag-List’Import’ Vue-Flag-List / Dist / Vue-Flag-List.min.css’Vue.use (Vueflaglist)
   

Methos: {GetCode (CODE)}}
   
2.2 Released to NPM

1. Register an NPM account

2 in the NPM website 2, switch to the project root directory required to be packaged , Log in to NPM account, enter user name, password, email
  npm login  

3, the last step, execution NPM Publish

  # Lin @ link-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    Third, postscript 
For a long time, finally put the prototype of the Vue-Flag-List plugin, this is a very simple plugin, will continue to maintain it, add more practical functions.

NPM UNPUBLISH –force: Remove a release package (can also remove the specified version of the package)

npm logout: logout users

The above is the full content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment