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.添加源

 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 登录

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

 

 

 

 

 

 

 

 

 

 

 

 

 

。。。

posted @ 2019-08-10 21:18  混名汪小星  阅读(710)  评论(0)    收藏  举报