NPM – Package manager for JavaScript

This article mainly introduces the common command of NPM, and how to release some common JS modular code to NPM for convenience in the future, and how to package a VUE component to release to NPM and finally download to local use process.

NPM (Node Package Manager) is the default module Manager of Node. It is a command-line software used to install and manage Node modules, as well as other open JS module codes. NPM has the advantage of helping us resolve dependencies in addition to downloading required modules, and also downloading dependent modules at the same time.

NPM – Package manager for JavaScript

npm help

    access, adduser, bin, bugs, c, cache, completion, config,
    ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,
    explore, get, help.help-search, i, init, install,
    install-test, it, link, list, ln, login, logout, ls,
    outdated, owner, pack, ping, prefix, prune, publish, rb,
    rebuild, repo, restart, root, run, run-script, s, se,
    search, set, shrinkwrap, star, stars, start, stop, t, team,
    test, tst, un, uninstall, unpublish, unstar, up, update, v,
    version, view, whoami
Copy the code

NPM help allows you to view all available commands.

NPM common directives

NPM install name // This command is used to install the module NPM uninstall name // This command is used to uninstall the module NPM run name // This command is used to execute the scriptCopy the code

How do I publish my own modules with NPM

All the packages we download and publish are stored at this address: https://www.npmjs.com/. If we publish something, we must have our own logo, so we must register our account first.

1. Register users

NPM adduser To run this command, you will need to type Username: Password: Email:Copy the code

2. Review

The next step is to check whether the registration is successful

npm whoami
Copy the code

(3) establish a package

Name: (dateFormat) datechange version: (1.0.0) Description: change dateFormat Entry Point: (index.js)test command: 
git repository: https://github.com/shuangmuyingzi/dateFormat.git
keywords: dateformat date datechange
author: lingzi
license: (ISC) 
About to write to /Users/linziying/Downloads/npm/dateFormat/package.json:

{
  "name": "datechange"."version": "1.0.0"."description": "change date format"."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git"."url": "git+https://github.com/shuangmuyingzi/dateFormat.git"
  },
  "keywords": [
    "dateformat"."date"."datechange"]."author": "lingzi"."license": "ISC"."bugs": {
    "url": "https://github.com/shuangmuyingzi/dateFormat/issues"
  },
  "homepage": "https://github.com/shuangmuyingzi/dateFormat#readme"
}


Is this ok? (yes) 

Copy the code

You will then have a package.json file in that directory

Add a simple date conversion format plug-in

Each time the backend data interface returns basically a timestamp, which often needs to be converted to a common date format. I’ll take a simple date-conversion widget as an example. Place the following code in the same directory as the package.json file.

date.js

(function(global) {
    var datechange = (function() {
      
      return function (date) {
  
        date = date || new Date;
  
        if(! (date instanceof Date)) { date = new Date(date); }if (isNaN(date)) {
          throw TypeError('Invalid date');
        }
        let re = date.getFullYear() + '. ' + (date.getMonth()+1) + '. ' + date.getDate();
        return re
  
      }
  })()

  if (typeof define === 'function' && define.amd) {
    define(function () {
      return datechange;
    });
  } else if (typeof exports === 'object') {
    module.exports = datechange;
  } else {
    global.datechange = datechange;
  }

})(this);
Copy the code

4. Release

NPM publish Remember to log in to NPM before pushing otherwise an error will be reported. Change the version number if you are pushing the same project again.

use

npm install --save-dev datechange
Copy the code

var datechange = require('datechange');
var now = new Date();
var timeStamp = datechange(now);
Copy the code

OR

<script type="text/javascript" src='date.js'></script>
	<script type="text/javascript">
		var now = new Date();
		var timeStamp = datechange(1511350834583);
		alert(timeStamp)
	</script>
Copy the code

The package name is the name property in package.json. Specific see lot code: https://github.com/shuangmuyingzi/dateFormat

How do Vue components upload to NPM

Methods a

Package the project into a JS file with Webpack and export the JS file in package.json main.

create

• Vue – CLI creates vUE simple projects

  vue init webpack-simple load-ling-zi

• Modify the package. The json

  1. Modify the “private” : false

     Projects created by NPM by default are private and must be made public if they are to be published to NPM

  2. Add the “main”, “dist/build js.” “

     When referencing this component with import loading from ‘load-ling-zi’, the project automatically finds node_modules/load-ling-zi/dist/build.js

• Add the component code app.vue to SRC and create our export file index.js. Add to index.js:

  import load from './App.vue'
  exportIt is automatically installed in default load //globalif(typeof window ! = ='undefined' && window.Vue) {
    window.Vue.component('load', load);
  }
  Copy the code

• Since we ended up packing as a JS file, we need to modify the webpack.config.js configuration file

  Since not everyone using your component is via NPM press and impor and many are via

       entry: './src/index.js',
       output: {
       path: path.resolve(__dirname, './dist'),
       publicPath: '/dist/',
       filename: 'build.js',
       library: 'load',
       libraryTarget: 'umd',
       umdNamedDefine: true
       },
  Copy the code

• Finally, you need to remove the /dist from the.gitignore file otherwise you’ll ignore the dist package when you upload it.

  Specific code is on the lot: https://github.com/shuangmuyingzi/loadingModule/tree/master/load/load-ling-zi

release

NPM publish, refer to the above steps.

application

1. Installation

# install dependencies
npm install load-ling-zi -D
Copy the code

2. Usage

<loading v-if="loading.isShow">
    <span>{{ loading.text }}</span>
</loading>

<script>
    import loading from 'load-ling-zi'
    export default {
        components: {
            loading:loading
        },
        data () {
            return {
                loading:{
                    isShow:true,
                    text:"Loading"
                },   
            }
        }
    }
</script>
Copy the code

Way 2

In the main direct export Vue components (. Vue file) specific code here: https://github.com/shuangmuyingzi/loadingModule/tree/master/loading

Write in the last

About vue components, estimates that there are many ways to plug-in implementation mode, this paper assume that topic and level is limited, the example is simple, a good components also need to consider more configurability and universality, data can be configured, the structure of the configurable, style, etc., can be configured es the modular method is also a lot of inside, Others are introduced directly in