前端工程化 - npm
什么是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镜像
- 安装sinopia
npm 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的更多相关文章
- 前端工程化 - 剖析npm的包管理机制
转自https://juejin.im/post/5df789066fb9a0161f30580c 现如今,前端开发的同学已经离不开 npm 这个包管理工具,其优秀的包版本管理机制承载了整个繁荣发展的 ...
- 搭建前端私有npm杂记
随着前端队伍越来越壮大,项目间共享代码就变得尤为重要.常用的框架/类库没必要在每个项目都放一份,团队内部产出的公共模块也需要有合理的共享机制.现在,用npm管理前端代码已经是业界趋势.楼主尝试用私有n ...
- 前端工程化开发之yeoman、bower、grunt
上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
- 前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
- gulp前端工程化教程
gulp npm install -g gulp-concat 文件打包 npm install -g gulp-rename 文件重命名 npm install -g gulp-imagemin 图 ...
- 前端工程化系列[06]-Yeoman脚手架核心机制
在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ❏ Yeoma ...
- 前端工程化系列[04]-Grunt构建工具的使用进阶
在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...
- 前端工程化系列[03]-Grunt构建工具的运转机制
在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...
随机推荐
- 条件注释判断IE浏览器版本
lt,lte,gt,gte分别表示什么 lt:小于当前版本 lte:小于或等于当前版本,包括本身 gt:大于当前版本 gte:大于或等于当前版本,包括本身 使用格式 // 如IE9以下(不包括IE9加 ...
- 微信小程序 --- loading提示框
loading:提示框: 效果: loading和toast和像,只不过 toast 是设置结束时间,时间到了去触发bindchange事件,进行隐藏. 但是 loading 是没有办法设置事件让其隐 ...
- MUI窗口管理
参考:窗口管理 http://dev.dcloud.net.cn/mui/window/ 页面初始化:在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,m ...
- 树链剖分-点的分治(dis[i]+dis[j]==k的点对数量)
poj2114 Boatherds Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 1195 Accepted: 387 ...
- javaWeb项目springMVC框架下利用ITextpdf 工具打印PDF文件的方法(打印表单、插入图片)
方法一:打印PDF表单以及在PDF中加入图片 需要的资料: jar包:iTextAsian.jar ,itext-2.1.7.jar: 源码: public static void main(Stri ...
- U盘安装Win7系统,遇到硬盘鼠标键盘失灵等情况,如何安装U盘中加入USB3.0驱动的支持
U盘安装系统出现鼠标键盘不能使用,在intel六代处理器平台,安装过程中会出现安装原生镜像不能识别或者鼠标键盘不能使用等情况,可以参考以下方法进行. 风险提示:重装或升级系统会导致系统盘数据丢失,建议 ...
- Android官方架构组件指南
此指南适用于那些曾经或现在进行Android应用的基础开发,并希望了解和学习编写Android程序的最佳实践和架构.通过学习来构建强大的生产级别的应用. 注意:此指南默认你对Android开发有比较深 ...
- c# 自定义控件之小小进度条
先看效果图: 非常简洁的一个进度条. 完整项目源码下载:http://files.cnblogs.com/files/tuzhiyuan/%E8%BF%9B%E5%BA%A6%E6%9D%A1%E6% ...
- 关于Python装饰器内层函数为什么要return目标函数的一些个人见解
https://blog.csdn.net/try_test_python/article/details/80802199 前几天在学装饰器的时候,关于装饰器内层函数调用目标函数时是否return目 ...
- form表单上传图片问题:线下可以而线上不可以
由于上传图片需要一定时间,而线下速度快线上速度慢. 所以如果你的上传窗口是弹出界面,那么就会面临上传未完成就关闭了该界面.导致上传失败.