Package utils from 0 and publish to NPM (private repository)

This is my second day of the August Challenge

1. Pay attention to

This article is mainly to simulate the common Utils packaging into NPM private storage, applicable to several projects in the company, there are many duplicate components, Utils, want to reduce code reuse, less maintenance costs, establish private storage, not open

2. Process packaged as NPM package (utils code)

2.1 VUE page code and utils

Vue page

<template>
  <div id="app">
    call me : {{ userPrivate(phone) }}
    <br>Your contribution is {{money}}, with a total of {{userPrivate(money)}} digits</div>
</template>

<script>
import { userPrivate, getNumBit } from './utils/index'
export default {
  name: 'App'.data() {
    return {
      phone: 18819168888.money: 12345.88,
      userPrivate,
      getNumBit,
    }
  }
}
</script>
Copy the code

utils

 /** * Encrypted display of user's mobile phone information *@param { Number, String } Phone User's mobile phone/account */
module.exports = {
  // Encrypt the phone number
  userPrivate(phone) {
    const phoneStr = String(phone)
    if(! phone || phoneStr.length <11) return phone
    const privateIndex = phoneStr.indexOf('86') > -1 ? 5 : 3
    return `${phoneStr.substring(0, privateIndex)}* * * *${
    phoneStr.substring(privateIndex + 4, phoneStr.length)}`
  },
  // Get the integer bit length of the number
  getNumBit(num) {
    let intNum = num.toFixed(0);
    returnintNum.length; }}Copy the code

2.2 Package Utils into NPM

1. Install using Verdaccio (must be installed globally, only available at run time)

npm install -g verdaccio
verdaccio
Copy the code

2. Create the bingXixi-private-common-utils package

-> put utils index.js under bingxixi-private-common-utils -> initialize

Mkdir bingxixi-private-common-utils here is the package name I am made up of project name + function CD bingxixi-private-common-utilsCopy the code

3 to submit

1. Switch to the bingxixi-private-common-utils file underground

cd bingxixi-private-common-utils
Copy the code

2. Add. NPMRC, which can be edited with the NPM config Edit command, and your package will be released to a private repository 127.0.0.1:4873

3. The initialization

NPM init here if the file name is ok, just enterCopy the code

4. Add your own account to the private server

NPM adduser Remember the account you enteredCopy the code

5. release

npm publish
Copy the code

6. Check the

7. How do I update a release

We didn’t add the package description, so we created a new md file in bingxixi-private-common-utils, called readme.md, and the contents of md. You can search for a package on NPM, see Imitation

npm version patch 
npm publish 
Copy the code

Note: NPM version patch is in your original version number, say v1.0.0, it will add 1 to the base, if your version is not + 1, you can manually change package.json without NPM version patch, and then NPM publish

Results 8.

3. How to use vue page

1. Add NPMRC

NPMRC can be edited with the NPM config Edit command, or open the. NPMRC file directly with vscode. In this case, the package should be stored from private storage first

2. Download package

npm i bingxixi-private-common-utils -S
Copy the code

3. Page processing

Main.js, and global registration

import { userPrivate, getNumBit } from 'bingxixi-private-common-utils'
Vue.prototype.$userPrivate = userPrivate
Vue.prototype.$getNumBit = getNumBit
Copy the code

Vue component page

<template>
  <div id="app">
    call me : {{ $userPrivate(phone) }}
    <br>Your contribution is {{money}}, with a total of {{$userPrivate(money)}} digits</div>
</template>

<script>
export default {
  name: 'App'.data() {
    return {
      phone: 18819168888.money: 12345.88,}}}</script>
Copy the code

Reference: Use Verdaccio to build NPM private storage