In the previous post: Portal, we developed the plugin and it can be used directly by putting it in node_modules. This post will publish the plugin to NPM and configure webpack related.

First, release NPM

Before Posting, go to the NPM website to register an account, skip the registration step.

1. Log in to NPM

Use a command line tool to access vue-modal-plugins and run the following command:

NPM login // login to the NPMCopy the code

Enter your user name, password and email address to log in successfully

2, publish,

Execute command:

npm publish
Copy the code

No_perms Private mode enable, only admin can publish this module

It is ok to set back to the original: NPM config set registry at http://registry.npmjs.org

You can find our plugin on the NPM website

3, test,

To test whether the download from NPM can be used in the project, first we manually delete vue-modal-plugins in node_modules and then download from NPM

cnpm install vue-modal-plugins --save
Copy the code


Webpack configuration

The Webpack document is installed first

cnpm install webpack webpack-cli --save-dev
Copy the code
cnpm install @babel/cli @babel/core @babel/preset-env babel-polyfill babel-loader --save-dev
Copy the code
cnpm install vue vue-loader vue-template-compiler --save-dev
Copy the code
cnpm install stylus-loader stylus style-loader css-loader --save-dev
Copy the code

webpack.config.js 

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry: './src/lib/index.js'// output: {path: path.join(__dirname,'dist'), // output path filename:'vue-modal-plugins.js'// Package output file type library:'vueModalPlugins'// String, exported library name libraryTarget:'umd'// Exported library types}, module: {rules: [{test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.styl(us)? $/, use: ['style-loader'.'css-loader'.'stylus-loader'] {},test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
        include: path.join(__dirname, 'src')
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  mode: 'development'
}
Copy the code

In order for the plugin to work in static HTML, we need to modify the index.js file to add a sentence

import vueModalPlugins from './vue-modal-plugins.vue'// Initialize the vue plug-in objectlet Modal = {}
Modal.install = function(Vue, options) { ... }... // If static HTML pages are imported, register manuallyif (window.Vue) {
  Vue.use(Modal)
}

...
export default Modal
Copy the code

After configuration, write webpack on the command line to pack the root directory to generate the dist folder

Update NPM

After modifying the content, you must modify the package.json version before publishing it

  1. You can modify version directly in the package.json file
  2. Version control is performed by using the NPM version command
npm version [<newversion> | major | minor | patch | premajor | preminor | 
prepatch | prerelease | from-git]
Copy the code

Its semantics are:

Major: major version (major version) Minor: minor version (minor update) Patch: patch number (patch) PreMajor: pre-major version PreMinor: pre-patch version prerelease: pre-release versionCopy the code

For example, if the initial version is 1.0.0, the corresponding semantics are as follows:

NPM Version Patch // 1.0.1 indicates minor bug fixes. NPM Version Minor // 1.1.0 indicates minor new features. NPM Version mMajor // 2.0.0 indicates major version or major upgrade NPM Version Preminor // 1.1.0-0 is followed by 0, indicating a pre-releaseCopy the code

Here we directly execute NPM version patch and publish NPM publish.

Reference:

  • Publish, update, and unpublish NPM packages (modules)