NPM packet sending process

In the development process, for the convenience of development, we can download other people’s packaged NPM package, so how to create our own NPM package?

Step 1: Create an account

If we want to publish our own NPM package, we first need to register an account on the NPM website

  1. The NPM website is www.npmjs.com/
  2. NPM website registration address: www.npmjs.com/signup After registration, log in on the computer and enter the user name, password and email address
npm login
Username: yolanda_****
Password: 
Email: 
Logged inAs [username] on https://registry.npmjs.org/Copy the code
Step 2: NPM init

Create an nPMTest folder and enter it. Perform NPM init

Enter the package name, author; Main for you to pack the entry file

Note: The author must be the same as the username of your NPM account

Ex. :

{
  "name": "npmtest"."version": "1.0.0"."description": "this is npm test project"."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yolanda****"."license": "ISC"
}
Copy the code
Step 3: Write in-package code

Create the SRC directory and create the index.js file

function sayHello() {
    return 'Hello world';
}
module.exports = {
    sayHello
}
Copy the code

Change the main entry in package.json to SRC /index.js

Step 4: Publish NPM publish

Once you have written your own package, you can publish using NPM.

npm publish
Copy the code

You do not have permission to publish “npmtest”. Are You logged in as the correct user? : nPMtest, you should check whether your NPM package already exists in the NPM official website, if so you must redefine the package name.

Note: You need to change the version number every time you release an update package, that is, version in package.json;

How do I publish Vue component packages

Write a Vue component

Create a SRC directory to store the app.vue and index.js files. app.vue

<template>
    <div>
        {{content}}
    </div>
</template>
<script>
export default {
    name: 'Notify'.data() {
    },
    props: {
        content: {
            type: String,
        }
    }
}
</script>

Copy the code

index.js

import Notify from './app.vue';
export default Notify;
Copy the code

Since the component uses VUE and ES6 syntax, we need to install the following dependencies, which are packaged and compiled using WebPack

{
  "name": "common-notify"."version": "0.0.5"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",},"author": "yolanda_xiaoxiao"."license": "ISC"."devDependencies": {
    "babel-core": "^ 6.26.3"."babel-loader": "Seven"."babel-plugin-transform-object-rest-spread": "^ 6.26.0"."babel-plugin-transform-runtime": "^ 6.23.0"."babel-polyfill": "^ 6.26.0"."babel-preset-es2015": "^ 6.24.1"."css-loader": "^ 2.1.1"."less": "^ 3.9.0"."less-loader": "^ 5.0.0"."style-loader": "^ 0.23.1"."url-loader": "^ 1.1.2." "."vue": "^ 2.6.10"."vue-html-loader": "^ 1"."vue-loader": "^ 15.7.0"."vue-router": "^ 3.0.6"."vue-style-loader": "^ 4.1.2." "."vue-template-compiler": "^ 2.6.10"."webpack": "^" 4.32.2."webpack-cli": "^ 3.3.2 rainfall distribution on 10-12"}}Copy the code

Note: for environments after Webpack 4.0, you can configure webpack.config.js directly using –mode

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'notify.min.js',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader'
    }, {
      test: /\.less$/,
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'less-loader'}]}, {test: /\.js$/,
      exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
      loader: 'babel-loader'
    },
    {
      test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
      loader: 'url-loader',
      query: {
        limit: 30000,
        name: '[name].[ext]? [hash]'
      }
    }]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new VueLoaderPlugin()
  ]

};
Copy the code

Note: VueLoaderPlugin is required for vuE-loader versions later than 15.x.

Configure the build command: package.json

"scripts": {
    "build": "webpack --mode production --progress"
}
Copy the code

Run NPM run build to compile package change entry file package.json

main: '/dist/notify.min.js'
Copy the code

Publish directly runs NPM publish

Specific example code reference address: github.com/onlymyworld…

Delete the NPM package

NPM unpublish --force for example, NPM unpublish nPMtest_xiao --forceCopy the code