什么是npm

npm的全称Node Package Manager,npm原先只是作为nodejs的包管理工具,然而随着前端社区的发展,如今npm不仅是nodejs的包管理工具,还是前端js的包管理工具。

更新npm

安装过nodejs都知道,nodejs的安装会顺便安装上npm,所以这里不讲如何安装npm。通过命令npm update -g npm可以进行npm的更新

墙的问题

因为墙的原因,在国内使用npm会比较慢,这时候可以使用淘宝的npm镜像

(方法一) 每次使用npm的时候指定镜像,npm install -g npm --registry=https://registry.npm.taobao.org

(方法二) 安装cnpm,npm install -g cnpm --registry=https://registry.npm.taobao.org,之后就可以使用cnpm替代npm来进行包的安装,更新和卸载

(方法三) 设置全局镜像源npm config set registry https://registry.npm.taobao.org

常用命令

npm init初始化bower生成package.json
npm install package-name安装,如npm install express,可以带上--save参数,这样package.json中会写入该包的信息
npm uninstall package-name卸载
npm update更新
npm list查看已安装的包列表

使用npm shrinkwrap来管理包的依赖

在项目开发中我们往往需要安装和升级相应的包,然而我们在开发的过程中使用的包版本和开发完成后进行部署的时候(npm install),包的版本可能会存在差异,这种差异可能就会导致项目运行报错。为了避免这种错误的发生,我们可以使用npm shrinkwrap来解决这个问题。

在开发过程中,引入一个新包的流程如下

  • 执行npm install --save package-name@package-version
  • 进行实际开发
  • 执行npm shrinkwrap
  • 将代码,package.json和npm-shrinkwrap.json提交到版本仓库

在开发过程中,更新一个包的流程如下

  • 执行npm outdated获取项目所有依赖的更新信息
  • 执行npm install --save package-name@package-version
  • 进行实际开发和功能测试
  • 执行npm shrinkwrap
  • 将代码,package.json和npm-shrinkwrap.json提交到版本仓库

在开发过程中,删除一个包的流程如下

  • 执行npm uninstall --save package-name
  • 进行测试
  • 执行npm shrinkwrap
  • 将代码,package.json和npm-shrinkwrap.json提交到版本仓库

创建私有的npm镜像

  • 安装sinopianpm install -g sinopia
  • 启动sinopia,执行sinopia

接着在浏览器地址栏中输入http://localhost:4873/

  • 创建新用户npm adduser --registry http://localhost:4873
  • 发布包npm publish
    在提交包之前需要到~/.config/sinopia/config.yaml配置文件中删除proxy: npmjs这行配置项,这样才能将包提交到本地私有源
  • 安装包,安装包之前需要将镜像源指向私有的源,如npm config set registry http://localhost:4873

前端工程化 - npm的更多相关文章

  1. 前端工程化 - 剖析npm的包管理机制

    转自https://juejin.im/post/5df789066fb9a0161f30580c 现如今,前端开发的同学已经离不开 npm 这个包管理工具,其优秀的包版本管理机制承载了整个繁荣发展的 ...

  2. 搭建前端私有npm杂记

    随着前端队伍越来越壮大,项目间共享代码就变得尤为重要.常用的框架/类库没必要在每个项目都放一份,团队内部产出的公共模块也需要有合理的共享机制.现在,用npm管理前端代码已经是业界趋势.楼主尝试用私有n ...

  3. 前端工程化开发之yeoman、bower、grunt

    上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...

  4. 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)

    1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...

  5. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

  6. gulp前端工程化教程

    gulp npm install -g gulp-concat 文件打包 npm install -g gulp-rename 文件重命名 npm install -g gulp-imagemin 图 ...

  7. 前端工程化系列[06]-Yeoman脚手架核心机制

    在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ❏ Yeoma ...

  8. 前端工程化系列[04]-Grunt构建工具的使用进阶

    在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...

  9. 前端工程化系列[03]-Grunt构建工具的运转机制

    在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...

随机推荐

  1. Weinre 远程调试移动端手机web页面

    调试场景 1.调试页面在手机上.2.调试工具在PC的chrome3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi 一.安装 Weinre 1.Weinre是基于nodejs实现的,所以使用 ...

  2. Spring AOP依赖包

    Spring4和2.5发生了很大的变化,原来的spring2.5很多倚赖的jar包都是随着spring一起发布的,现在spring4已 经不再发布倚赖包,需要你自己去导入 1.org.springfr ...

  3. 增量式PID的matlab实现

    首先,增量式PID的实现公式: 式中 Δe(k)=e(k)-e(k-1) 进一步可以改写成 式中      . . 为了便于理解,也可写成: 式中e(k)为第k次采样时的设定值与实际值的差,e(k-1 ...

  4. Linux(Centos)下搭建SVN服务器

    鉴于在搭建时,参考网上很多资料,网上资料在有用的同时,也坑了很多人,本文的目的,也就是想让后继之人在搭建svn服务器时不再犯错,不再被网上漫天的坑爹作品所坑害,故此总结! /******开始***** ...

  5. Mssql备份失败

    Mssql备份失败出现如下提示 备份时先删除默认的备份设备,自己选择路径

  6. Iframe中子窗体给父窗体传值

    <html> <head> <script type="text/javascript"> function GetData(data) { a ...

  7. Oracle等待事件之等待事件详解

    一. 等待事件的相关知识:1.1 等待事件主要可以分为两类:即空闲(IDLE)等待事件和非空闲(NON-IDLE)等待事件.1). 空闲等待事件指ORACLE正等待某种工作,在诊断和优化数据库的时候, ...

  8. docker 2375 vulnerability and self-signatuer certifications

    Docker暴露2375端口,引起安全漏洞 今天有小伙伴发现Docker暴露出2375端口,引起了安全漏洞.我现在给大家介绍整个事情的来龙去脉,并告诉小伙伴们,怎么修复这个漏洞. 为了实现集群管理,D ...

  9. Drainage Ditches---hdu1532(最大流)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1532 题意: 每次下雨的时候,农场主John的农场里就会形成一个池塘,这样就会淹没其中一小块土地,在这 ...

  10. JavaScript如何把字符串中每个单词首字母转化为大写

    先上代码,再做解释. 思路分析: 1. 首先先把字符串中的单词转化为小写(toLowerCase),再对其进行截取(split),截取依据为按照空格截取: 2. 此时经过步骤一之后得到的东西是一个数组 ...