什么是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. 【BZOJ2004】[Hnoi2010]Bus 公交线路 状压+矩阵乘法

    [BZOJ2004][Hnoi2010]Bus 公交线路 Description 小Z所在的城市有N个公交车站,排列在一条长(N-1)km的直线上,从左到右依次编号为1到N,相邻公交车站间的距离均为1 ...

  2. 【BZOJ5101】[POI2018]Powód 并查集

    [BZOJ5101][POI2018]Powód Description 在地面上有一个水箱,它的俯视图被划分成了n行m列个方格,相邻两个方格之间有一堵厚度可以忽略不计的墙,水箱与外界之间有一堵高度无 ...

  3. 【BZOJ1458】士兵占领 最小流

    [BZOJ1458]士兵占领 Description 有一个M * N的棋盘,有的格子是障碍.现在你要选择一些格子来放置一些士兵,一个格子里最多可以放置一个士兵,障碍格里不能放置士兵.我们称这些士兵占 ...

  4. java获取年份的第一天和最后一天

    Calendar cal = Calendar.getInstance();cal.set(Calendar.MONTH, 0);cal.set(Calendar.DATE, 1);String da ...

  5. Dij二级最短路

    hdu1245 Saving James Bond Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  6. 用到了yii2 hasMany() 方法,一对多关联

    view页面代码:其中supply,item,price是一个AR类都是一个类,item和prices是一对多关系: [ 'label' => '参考', 'format' => 'htm ...

  7. Andrew Ng机器学习公开课笔记 -- Generative Learning algorithms

    网易公开课,第5课 notes,http://cs229.stanford.edu/notes/cs229-notes2.pdf 学习算法有两种,一种是前面一直看到的,直接对p(y|x; θ)进行建模 ...

  8. 三种空格unicode(\u00A0,\u0020,\u3000)表示的区别

    1.不间断空格\u00A0,主要用在office中,让一个单词在结尾处不会换行显示,快捷键ctrl+shift+space ; 2.半角空格(英文符号)\u0020,代码中常用的; 3.全角空格(中文 ...

  9. java-mybaits-010-mybatis-spring-使用 SqlSession、注入映射器

    一. SqlSession概述 在 MyBatis 中,你可以使用 SqlSessionFactory 来创建 SqlSession.一旦你获得一个 session 之后,你可以使用它来执行映射语句, ...

  10. python模块之pyMySql

    目录: 安装 使用 一.安装 本模块为python第三方模块,需要单独安装.作用为调用mysql接口执行模块 pip3 install pyMySql 二.使用 1.执行SQL #!/usr/bin/ ...