对于jenkins上前端项目 npm 或 yarn 打包 及 部署 使用
1.npm和yarn镜像源地址
npmMirror ~~~~~ https://skimdb.npmjs.com/registry/
edunpm ~~~~~~ http://registry.enpmjs.org/
taobao ~~~~~~ https://registry.npm.taobao.org/
cnpm ~~~~~~ http://r.cnpmjs.org/
npm ~~~~~~ https://registry.npmjs.org/
yarn ~~~~~~ https://registry.yarnpkg.com/
nj ~~~~~~ https://registry.nodejitsu.com/
2.Yarn
“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时的坑了: npm install的时候巨慢。特别是新的项目拉下来要等半天,删除node_modules,重新install的时候依旧如此。 同一个项目,安装的时候无法保持一致性。由于package.json文件中版本号的特点,下面三个版本号在安装的时候代表不同的含义。
()"5.0.3" :表示安装指定的5..3版本
()"~5.0.3":表示安装5..X中最新的版本
()"^5.0.3":表示安装5.X.X中最新的版本 这就麻烦了,常常会出现同一个项目,有的同事是OK的,有的同事会由于安装的版本不一致出现bug。
2.1安装yarn
#官网地址
https://www.yarnpkg.com/en/docs/install#centos-stable [root@node ~]# curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo [root@node ~]# curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - [root@node ~]# yum -y install yarn
2.2.yarn优点
速度快 。速度快主要来自以下两个方面:
(1)并行安装:无论 npm 还是 Yarn 在执行包的安装时,都会执行一系列任务。npm 是按照队列执行每个 package,也就是说必须要等到当前 package 安装完成之后,才能继续后面的安装。而 Yarn 是同步执行所有任务,提高了性能。
(2)离线模式:如果之前已经安装过一个软件包,用Yarn再次安装时之间从缓存中获取,就不用像npm那样再从网络下载了。
2.3.yarn命令
# cd /home/meisapp/.jenkins/workspace/"前端项目目录" #更换yarn源为淘宝源
yarn config set registry https://registry.npm.taobao.org/ #检查yarn当前源
yarn config get registry #安装依赖
yarn install #yarn构建前端项目
yarn run build:dev
3.npm
npm全称为Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。
npm的初衷:JavaScript开发人员更容易分享和重用代码。
3.1.使用场景
()允许用户从NPM服务器下载别人编写的第三方包到本地使用。
()允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
()允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用
3.2.npm部署
.root 登录linux .没有目录就自己创建一个
cd /home/meisapp/node/ .下载安装包
wget https://npm.taobao.org/mirrors/node/v4.4.7/node-v4.4.7-linux-x64.tar.gz .解压安装包
tar -zxvf node-v4.4.7-linux-x64.tar.gz .移除安装包
rm -rf node-v4.4.7-linux-x64.tar.gz .建立软连接
ln -s /home/meisapp/node/node-v4.4.7-linux-x64/bin/npm /usr/local/bin/npm
ln -s /home/meisapp/node/node-v4.4.7-linux-x64/bin/node /usr/local/bin/node .查看npm版本
npm -v .npm升级,@后面是版本号
npm i -g npm@3.3. 安装完成。
3.3.npm命令
# cd /home/meisapp/.jenkins/workspace/"前端项目目录" #更换yarn源为淘宝源
npm config set registry https://registry.npm.taobao.org/ #检查yarn当前源
npm config get registry #安装依赖
npm install #yarn构建前端项目
npm run build:dev
对于jenkins上前端项目 npm 或 yarn 打包 及 部署 使用的更多相关文章
- 使用jenkins进行前端项目自动部署
前面的话 后端的nodeJS项目可以使用pm2进行自动部署,由于前端项目打包后是静态资源,不需要进程守护.一般地,前端项目使用jenkins来进行自动部署,包括打包.测试等一系列流程.本文将详细介绍j ...
- 手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台 (Window系统)
前言 网上教程大多介绍的是Linux系统下SonarQube+Jenkins如何使用,这是因为这两款软件一般都是部署在服务器上,而大多数服务器,采用的都是Linux系统.大多数服务器用Linux的原因 ...
- jenkins发布普通项目、配置自动上线自动部署
1.以root用户运行jenkins是不专业的 刚开始用jenkins时用jenkins这个普通用户运行程序,始终无法连接到gitlab,报错如下: 先是把修改jenkins上的git路径,将git修 ...
- npm与yarn命令对比
Yarn是由Facebook.Google.Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 Yarn 是为了弥补 npm 的一些缺陷而出现的(比如,npm install时候会 ...
- 前后端分离,如何在前端项目中动态插入后端API基地址?(in docker)
开门见山,本文分享前后端分离,容器化前端项目时动态插入后端API基地址,这是一个很赞的实践,解决了前端项目容器化过程中受制后端调用的尴尬. 尴尬从何而来 常见的web前后端分离:前后端分开部署,前端项 ...
- 记录vue项目 用hbuilder离线打包集成极光推送 安卓篇
极光推送的官方demo: https://github.com/jpush/jpush-hbuilder-demo 里面也记录有详细的方法了. 我记录下自己的过程. 首先去极光那里创建一个应用 获取A ...
- 前端项目模块化的实践1:搭建 NPM 私有仓库管理源码及依赖
以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...
- Github配合Jenkins,实现vue等前端项目的自动构建与发布
本篇文章前端项目以vue为例(其实前端工程化项目的操作方法都相同),部署在Linux系统上(centos). 之前做前端项目的部署,一直都是手动运行打包命令,打包完.再使用FTP.Xshell等这类的 ...
- npm 和 yarn 前端包管理工具
前言 前端开发逐渐工程化,npm作为我们的依赖管理工具起到十分重要的作用,本文就来总结一下 npm 和 yarn 相关知识点. 正文 1.什么是npm (1)node的包管理器(node packag ...
随机推荐
- Java开发数据库设计的14个技巧,你知道几个?
1. 原始单据与实体之间的关系 可以是一对一.一对多.多对多的关系.在一般情况下,它们是一对一的关系:即一张原始单据对应且只对应一个实体.在特殊情况下,它们可能是一对多或多对一的关系,即一张原始单证对 ...
- BottomNavigationView 的使用
转载请注明出处:http://blog.csdn.net/wl9739/article/details/52875710 BottomNavigationView 很早之前就在 Material De ...
- JS计算数组的总和
1.最简单的遍历累计 var arr=[1,2,3,4,5,6] var sum =0 for(var i=0;i<arr.length;i++){ sum=sum+arr[i] } 2.利用r ...
- C# VS2010 windows服务的安装
可能是太过于懒惰的原因,研究个windows 服务的安装程序都花了大半天时间.在网上看了一些示例,大部分都言过其实,把过程搞得太过复杂,老是需要去研究如何利用InstallUtil.exe及其参数.事 ...
- oracle中的分组排序
1.首先,需要建表. 表名:coursr(失误,表名写错了) 2.我们需要对每个课程进行排序. 3.知识准备: 分组排序函数有3种: row_number() over() rank() over() ...
- 《Java知识应用》Java加密方式(Base64)详解
1. 说明 Base64加密方式:比较简单,加密快,对普通大众可以起到加密的作用.在程序员眼中和透明一样. Base64应用场景:图片转码(应用于邮件,img标签,http加密) 2. 案例 impo ...
- 吃透Python上下文管理器
什么是上下文管理器? 我们常见的with open操作文件,就是一个上下文管理器.如: with open(file, 'rb') as f: text = f.read() 那上下文管理器具体的定义 ...
- Nezuko: 1 Vulnhub Walkthrough
下载地址: https://www.vulnhub.com/entry/nezuko-1,352/ 虚拟机启动,设置IP地址DHCP获取 主机发现扫描: 主机层面扫描: ╰─ nmap -p1-655 ...
- 【30天自制操作系统】day05:结构体、文字显示与 GDT/IDT 初始化
输出一个 16 行 8 列的点阵字符 void putfont8(char *vram, int xsize, int x, int y, char c, char *font) { int i; c ...
- react中报错Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported
产生这个报错的原因是我当时将样式写到了less文件,我在div中使用的使用应该是使用className = ,而我误写了一个style = .style里面当然没有自定义的className,所以产生 ...