npm简介及常用操作

npm是什么?

它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) 。注册表 是一个巨大的数据库,保存了每个包(package)的信息来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

简而言之,npm是一个装着代码块,框架,库,包...等等

 

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

能解决什么问题

当一个项目依赖的代码越来越多:
1.去 jQuery 官网下载 jQuery
2.去 BootStrap 官网下载 BootStrap
3.去 Underscore 官网下载 Underscore

....

通过node中内置的 npm,就可以完美解决。

 

如何使用

前提是电脑已经配置好了node环境,且node版本6.+

1.在需要下载的文件夹中按住shift+鼠标右键,打开命令窗口

2.初始化:输入 npm  init

会有一份调查表单出来,然后一直按回车,直到文件夹中出现package.json文件

3.安装:输入 npm install  包的名字

默认下载最新版本

下载指定版本的包,输入 npm install   包的名字@版本号

下载完成后package.json文件中:

 

"dependencies": {
"jquery": "^3.4.1"
}

dependencies:依赖

package.json中的dependencies对象会存有下载包的名字和版本号

全局路径:输入:cnpm install 包名  -g

C:\Users\Administrator\AppData\Roaming\npm\node_modules

4.删除包,输入:npm  uninstall  删除包的名字 

 如下图:

 

 其他操作:

npm  -v 查看版本 ,测试是否成功安装

npm list   查看下载好的包的列表

 

npm一般用于下载后台(node)的包,可以下载前台的包,但不推荐下载前台的包,前台拥有自己的包管理工具bower,bower属于后台管理工具,他们之间的关系是:通过npm管理bower,通过bower管理前台的包。

延伸:cnpm(淘宝镜像)

 

因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,淘宝团队做出了属于国内版的npm,同步国外的npm,每10分钟更新一次,使用cnpm下载速度更加快

如何使用:

在npm初始化后,可以随时输入:npm install -g cnpm -registry=https://registry.npm.taobao.org

等待下载完成后

初始化:输入 cnpm init   

 其他与npm一样操作,把npm换为cnpm

与npm不同

更新package.json文件,输入:cnpm install 包名  --save

注意:下载过程中出现红色字体,说明下载过程中出错,此时只需要重新下载即可,如果还不行就直接无缝切换用npm下载,无需重新初始化。

 

npm发布

package.json

复制代码
   "name": "magic-editor",
   "main": "dist/myLib.umd.min.js",
   "scripts": {
    "lib": "vue-cli-service build --name magic-editor--target lib --entry ./src/index.js",
    "lib:w": "vue-cli-service build --name magic-editor --target lib --entry ./src/index.js --watch"
   }
复制代码

magic-editor:包的名字

src/index.js

 

复制代码
import './assets/index.css'
  import _Vue from 'vue'
import MagicEditor from 'src/components/MagicEditor/index.vue'; 
   export function install(Vue) {
    if (install.installed) return
    install.installed = true
    Vue.component('MagicEditor', MagicEditor)
}

const plugin = {
    install
}

let GlobalVue = null
if (typeof window !== 'undefined' && window.Vue) {
    GlobalVue = window.Vue
} else if (typeof global !== 'undefined' && global.Vue) {
    GlobalVue = global.Vue
} else {
    GlobalVue = _Vue;
}
if (GlobalVue) {
    GlobalVue.use(plugin)
}

export default MagicEditor
复制代码

 

此处参考:https://blog.csdn.net/qq_41887214/article/details/120619211

vue.config.js

复制代码
const MonacoLocalesPlugin = require('./plugins/MonacoEditorLocalesPlugin.js')
const path = require('path')
const webpack = require('webpack')
const resolve = dir => {
  return path.join(__dirname, dir)
}
// 设置环境变量,可以在全局使用
process.env.VUE_APP_MA_VERSION = require('./package.json').version

module.exports = {
  publicPath: './',
  productionSourceMap: false,
  configureWebpack: {
    output: {
      libraryExport: 'default'
    },
    module: {
      rules:[{
        test: /\.worker.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'worker-loader',
          options: {
            inline: 'fallback'
          }
        }]
      }]
    },
    plugins: [
      new MonacoLocalesPlugin({
        //设置支持的语言
        languages: ['zh-cn'],
        //默认语言
        defaultLanguage: 'zh-cn',
        //打印不匹配的文本
        logUnmatched: false,
        //自定义文本翻译
        // mapLanguages: { 'zh-cn': { 'Peek References': '查找引用', 'Go to Symbol...': '跳到变量位置', 'Command Palette': '命令面板' } }
      })
    ]
  },
  parallel: false,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义,比如.set('@@', resolve('src/components'))
      .set('public', resolve('public'))
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    // 移除 preload 插件
    config.plugins.delete('preload')
    config.output.globalObject('this')
    config.output.filename('js/[name].[hash].js').end()
  }
}
复制代码

npm发布到npm官方库

npm publish

管理npm源地址

  1.安装nrm

npm install -g nrm

  2.查看管理的npm(*星号代表当前使用源)

nrm ls

  3.切换源

nrm use 包源名称

 

   4.添加源

1
nrm add 源名称 源路径

        5.查看源

npm get registry

        6.修改源

npm set registry 新的源地址

   7.建议安装cnpm 

npm install cnpm -g --registry=https://r.npm.taobao.org

 

 

添加注册用户

npm addUser

按照提示需要输入Username、Password、Email,就可以注册成功

  

npm 登录

1
npm login  

输入,账号,密码,邮箱

 

npm本地发布

npm link

npm安装本地依赖

包名为 package.json 中的 name
npm link  包名

npm卸载本地依赖

npm unlink 包名

改变本地包内容,node_modules 也会随之改变

npm发布线上

npm publish

npm每次发布线上,需要改变版本号,否则发布不了

 .npmrc文件

 有些项目根目录下可能有个.npmrc的文件

里面有一些配置如
registry=http://registry.npm.xxxx.com
就是npm 仓库镜像地址

 

.npmrc给单独包设置源

package.json中的dependencies或者devDependencies模块设置要下载包的版本信息

"dependencies": {
    "@antv/g": "^3.4.10"
}

在.npmrc中设置对应源

@antv/g:registry=https://registry.npmjs.org/

然后就可以下载对应包了

 

问题:浏览器访问依赖包是好的,但是npm i 却不行

解决步骤:

1. 删除  node_modules

2. 清除缓存  执行  npm cache clean --force

3, 查看安装源是否正确  npm config get registry

4. 查看是否存在代理,可能是代理导致没找到包  

清除代理    npm config rm proxy

如果还是没用  则还需要删除 https的代理

npm config rm https-proxy

 

 

 

 

 

 

 

 

 

 

 

 

 

。。。

本文作者:混名汪小星

本文链接:https://www.cnblogs.com/wxyblog/p/11317575.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   混名汪小星  阅读(677)  评论(0编辑  收藏  举报
评论
收藏
关注
推荐
深色
回顶
收起
点击右上角即可分享
微信分享提示