NPM plug-in packaging and distribution process

NPMJS url

Address: www.npmjs.com/ To publish plug-ins, you need to register an account at this website

Step 1: Initialize the project

You need to create an empty project to package the plug-in and initialize the project using vue init webpack-simple project-name

Using vue init webpack-simple instead of Vue init webpack is intended to generate a more concise project configuration. The more configuration items you use, the more difficult it is to change. Webpack-simple is enough. A crackling operation will doCopy the code

Step 2: Modify the project directory

I have removed the redundant files from the SRC directory. The plug-in written here is a vue based utility plug-in, so there is no need for redundant files. (This operation can be done according to individual needs.)Copy the code
  1. Delete redundant files (this picture shows the directory of files generated after initializing the project) The red box is the deleted files

  2. Create the index.js file in the SRC directory

Step 3: Write a plug-in and modify the project configuration

  1. Index.js to write your own plug-in
export default { install: function (Vue, Options) {// email validation vue.prototype. $isEmail = (s) => {return / ^ ([a - zA - Z0 - _ - 9]) + @ ([a zA - Z0 - _ - 9]) + ((. [a zA - Z0 - _ - 9] {2, 3})} {1, 2) $/. The test (s)}}}Copy the code
  1. Modify the webpack.config.js file



Output: {path: path.resolve(__dirname, './dist'), // publicPath: '/dist/', // output the directory for parsing the file, specify the directory for the resource file reference filename: 'vue-basic-tool.js', // package the filename library: Require ("vue-basic-tool") libraryTarget: require("vue-basic-tool") libraryTarget: require("vue-basic-tool") libraryTarget: 'umd', // configure how to export library umdNamedDefine: true},Copy the code
  1. Modify the package.json file



"Main ": "dist/vue-basic-tool.js", // import package nameCopy the code

Step 4: Package and distribute

  1. Set up an account with NPMJS
  2. Enter NPM run build on the terminal of the current component to package first

  3. Type NPM login or NPM login — Registry on this terminalregistry.npmjs.orgLog in



  4. Enter NPM Publish or NPM Publish — Registry on this terminalregistry.npmjs.orgPublish

  5. After the release, view the plug-in

    Click on the NPMJS official website, click on the profile picture, select packages, view your own published packages, click on the package name, you can view some related information about the package



Step 5: Update the version

You need to manually change the version number in the package.json file. Otherwise, the release failsCopy the code