preface

Based on some summary of my previous open source project, as well as some problems and requirements collected, if you want to open source your own plug-in (NPM) but do not know how to start, this article will teach you how to set up by hand, and explain some problems I met, mainly for VUe2.x.

In my opinion, the general contents of an NPM package (plug-in) need to be prepared to open source:

  1. Core code open source (GitHub), documentation
  2. NPM package release, CDN setup
  3. Online demo set up (can cooperate with their own GIF renderings on the description document)

Tips: The NPM version recommends using NVM control

Preparatory work

  1. You need a GitHub account (you can host the demo on GitHub or Gitee or on your own server)
  2. Need an NPM account (publish your plugin to NPM)
  3. Vue scaffolding is recommended for vUe-based plug-ins

start

Use vue-CLI to generate your own project, delete all demo files and adjust the directory as follows:

  • examples: a demo that you tested locally, with entry functions and root components in it.
  • lib: is a packaged lib file, which will be mentioned later.
  • packagesThe first layer should have an entry function to expose the component.
  • public: Put some static resources (pictures, etc.) here.

Note that we have changed the structure directory and need to change the entry location with Webpack.

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js'.template: 'public/index.html'.filename: 'index.html'}}}Copy the code

Now that the overall framework is set up, let’s talk about the details.

When defining a vue plugin, you need to have the install method do what you want to do in it, and then expose it in index.js, for example:

import component from './vue-dark-photo'

// The install method of vue, used to define the vue plug-in
const install = (Vue, option) = > {
    // do something
}
// For CDN import mount vUE instance import plug-in
if (typeof window! = ='undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install,
  component
}
Copy the code

After completing your own component, keep the following two files in examples (or make your own) :

The main. Js:

import Vue from 'vue'
import App from './App.vue'
import VDPhoto from '.. /packages'

Vue.use(VDPhoto)

new Vue({
  render: h= > h(App),
}).$mount('#app')

Copy the code

After the entry function is introduced, it can be used in app.vue. It will not be described here, its purpose is mainly to facilitate their own local test plug-in.

Release NPM

Readme. md is recommended to be refined and supplemented with necessary instructions before release.

After development, if you want the plugin to be imported via CDN, you need to package the code into library mode (lib) using vue. Add the following command to package.json:

  "scripts": {
    "lib": "Vue-cli-service build --target lib --name 'your plugin name' --dest lib 'Your plugin main entry '"
  },
Copy the code

After the command is executed, the package is as follows:

See the official documentation for details: Lib packaging

Once the package is packaged, you can publish the NPM package. First, execute NPM login to login to your NPM account

Once logged in correctly, you can execute NPM publish to publish your NPM package

The default path of your plugin’s CDN:

cdn.jsdelivr.net/npm/ Your plugin name @{… cdn.jsdelivr.net/npm/ Your plugin name @{…

Note:

  1. If you are in the.npmrcNPM configuration files are generally available inDrive C /USER/ USERWill be the default source address with taobao mirror source remember to change back oh (NPM original address:Registry.npmjs.org).
  2. Note that the NPM package name cannot contain uppercase letters and the version number cannot be the same in each iteration.
  3. Need to be available at the time of publicationpackage.jsonadd"private": falseTo publish.
  4. inpackage.jsonjoin"Keyword ":" name of your plug-in"For others to import your NPM package correctly.
  5. in.npmignoreTo configure the files you don’t want to publish, give a default directory:
.DS_Store
node_modules
examples
public
/dist
.svn
.gitignore

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
Copy the code

Setting up an online Demo

To create our own online demo using GitHub or Gitee Pages (the gitee Pages feature is currently disabled), start by creating a repository called ‘Your name ‘.github. IO. I like to create a branch called GH-Pages, build a prototype using vue scaffolding in Main and install your plugin (for example, NPM I vue-dark-photo), and then use some basic functionality in the project. Git subtree push –prefix= Dist Origin GH-pages. If there are other errors, you cannot use this command. It is recommended to manually drag the command. 🐶

Then configure the following operations on GitHub

Just visit the website in the picture. GitHub will automatically deploy your code (which takes a little time) every time you push a static resource to a remote repository, and you can view your historical version below

So far the online demo has been set up (if you do not have a proxy to suggest a whole, do development how can no proxy 🐶)

At the end

If this article has been helpful to you, please give me a thumbs up and favorites or if you have any questions or suggestions please leave your comments below.

After this village did not have this store 🐶, the suggestion collects point to like, believe aspirant and sunshine handsome/beautiful you will certainly point to like.

🚀 I am a cookie, you grow up on the road of a beacon. 🚀