什么是npm系列：二、install 的十八般武艺

[ 前端攻城 ] 2019年8月19日

我们平时使用npm install只是用来安装npm上的包，其实它比我们想象的更强大，不仅仅是安装npmjs上的包，还能够从git、gitlab直接安装，我们先看下install命令的参数列表：

// 从npm源安装
npm install 
npm install [<@scope>/]<name>
npm install [<@scope>/]<name>@<tag>
npm install [<@scope>/]<name>@<version>
npm install [<@scope>/]<name>@<version range>

// 从git源、tar包、本地目录安装
npm install <git-host>:<git-user>/<repo-name>
npm install <git repo url>
npm install <tarball file or url>
npm install <folder>

1. npm install

默认情况下，执行命令后会安装package.json中罗列的所有模块。

如果添加--production标记，或者环境变量NODE_ENV被设置为production,npm就不会安装devDependencies中的模块。

1.1 npm install `<folder>`

通过symlink的形式，把包目录连接到项目中。

1.2 npm install `<tarball file or url>`

从tar包装有两种方式：

file : 本地tar文件

npm install ./package.tgz

url : 远程tar的地址

npm install https://github.com/indexzero/forever/tarball/v0.5.6

1.3 npm install `<git remote url>`

另一个比较常见的方式是从git地址安装npm包，不过使用的时候需要注意仓库是否太大，以及源地址是否在外国，这些都会影响安装速度。

协议地址的格式如下：

<protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]

<protocol> 可以是 git, git+ssh, git+http, git+https, 或者 git+file.

如果配置了#<commit-ish>或#semver:<semver>，npm会安装匹配到的特定提交，否则会使用master分支。

在使用git安装模块时，会涉及到访问权限的问题，我们可以使用以下的环境变量：

GIT_ASKPASS
GIT_EXEC_PATH
GIT_PROXY_COMMAND
GIT_SSH
GIT_SSH_COMMAND
GIT_SSL_CAINFO
GIT_SSL_NO_VERIFY

环境变量的具体介绍可以看此：Git 内部原理 - 环境变量

另外还有一个笨办法是使用ssh方式安装，本地电脑配置ssh key，通过配置之后可以直接验证权限。

1.4 npm install `<githubname>/<githubrepo>[#<commit-ish>]`

如果我们的代码是托管在github上，就可以用更简短的命令来安装：

npm install <githubname>/<githubrepo>[#<commit-ish>]
npm install github:<githubname>/<githubrepo>[#<commit-ish>]

示例如下：

npm install ineo6/magic-lint
npm install github:ineo6/magic-lint

1.5 从github gist安装

命令如下：

npm install gist:[<githubname>/]<gistID>[#<commit-ish>|#semver:<semver>]

把https://gist.github.com/gistID的内容安装为包，需要注意的是gist内容需要一个梯子才能访问。

示例如下：

npm install gist/1b91123bccc1bb3509bccdbe15215c83

1.6 从bitbucket安装

安装托管在https://bitbucket.org/bitbucketname/bitbucketrepo上的包。

命令如下：

npm install bitbucket:<bitbucketname>/<bitbucketrepo>[#<commit-ish>]

示例如下：

npm install bitbucket:mybitbucketuser/myproject

1.7 从gitlab安装

安装托管在https://gitlab.com/gitlabname/gitlabrepo上的包。

命令如下：

npm install gitlab:<gitlabname>/<gitlabrepo>[#<commit-ish>]

示例如下：

npm install gitlab:mygitlabuser/myproject
npm install gitlab:myusr/myproj#semver:^5.0

2. 附加参数

在使用npm install的时候，我们可以混合使用各类参数：

--tag 对应的是dist-tag（实际执行中发现无效）

--dry-run相当于模拟运行，只会输出日志，不做实际的安装。

--package-lock-only只更新package-lock.json，不安装依赖。

-f or --force强制安装远端的资源

-g or --global全局安装

--global-style安装本地依赖时，会导致目录形式和全局安装结果一样

--ignore-scripts忽略package.json中的scripts脚本

--legacy-bundling npm 的安装方式会恢复到嵌套式安装

--link 把全局包以软连接的形式安装到本地（后续会扩展介绍）

--no-bin-links 避免创建包中的二进制执行文件的symlinks

--no-optional 避免可选依赖被安装

--no-shrinkwrap 忽略shrinkwrap

--no-package-lock 忽略 package-lock.json

--nodedir=/path/to/node/source 指定node目录

--only={prod[uction]|dev[elopment]} 等同于NODE_ENV，只安装非devDependencies依赖或者devDependencies依赖

--no-audit 禁用诊断报告

在使用上面参数的时候我们还可以附加两个参数：

-E, --save-exact：版本号不会按照语义化记录，会显示具体的"1.2.3"
-B, --save-bundle：依赖也会记录在bundleDependencies中

4. 预告

下一篇的名称 发布自己的npm包，重点讲解发布流程以及需要注意的点，同时也有不少干货等着大家发现。

系列汇总

什么是npm系列：一、npm简介

[ 前端攻城 ] 2019年8月15日

npm是Node.js的包管理工具，它的诞生也极大的促进了前端的发展，在现代前端开发中都离不开npm的身影。

微信小程序的自动化发布之路

[ 前端攻城 ] 2019年8月14日

微信小程序的自动化发布之路

环境准备

微信开发者工具只支持macOS和Windows平台，所以jenkins也只能运行在这两个环境中。现在假设我们已经安装了jenkins，并且配置好了任务，大家可以参考微信小程序集成 Jenkins中的配置教程。

内网穿透神器FRP

[ 软件分享 ]

frp

frp 是一个可用于内网穿透的高性能的反向代理应用，支持 tcp, udp, http, https 协议

目前主要的场景是内网穿透，可以用于本地调试微信接口、本地站点公网访问等。

本文主要讲解：

frp客户端配置
frp服务端配置&&搭建

2048

[ 前端攻城 ] 2014年3月27日

先是有一款让人欲罢不能的flappy bird,最近又出了一个简单也让人上瘾的游戏2048，它基于游戏1024，和Threes游戏规则差不多。2048风靡之后，很多人对其进行了修改，制作了朝代版，口袋妖怪版等等，其实还有很多，网上一搜是一大片。

在查看2048源码时，有这么一段代码：

  (function() {
  var lastTime = 0;
  var vendors = ['webkit', 'moz'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame =
    window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
      timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }

  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
  }
}());

代码里面用到 requestAnimationFrame,它是浏览器提供的统一帧管理、提供监听帧的API，为了解决复杂和流畅性要求高的动画形式。这是传统setInterval函数实现的动画无法达到的。

使用了requestAnimationFrame之后，自己的动画绘制就跟着浏览器的绘制间隔走，不会存在过度绘制的问题，动画不掉帧。

~~浏览器兼容性:~~

~~总的来兼容不是很好，安卓设备根本不支持。就需要一个兼容方法了，当然就是上面贴出的代码，连IE6都支持哦。~~

来个效果，点下面的按钮，会滚上去然后滚下来。

调用方法：

window.requestAnimationFrame(function () {
  //动画
});

使用MyDate97控件制作节假日管理的前端

[ 前端攻城 ] 2014年3月26日

在设计一些管理系统的时候，需要考虑工作日的管理，这样就一般要列出所有日历，然后设定工作日了。感觉自己实现的话比较难，不太敢动手。在百度上找到一篇文章，上面介绍了使用MyDate97控件来实现的方法。

1.日历的每个月份是一个iframe，由MyDate97决定的，有能力的可以自己修改。
2.因为是iframe组成，所以在初始化页面的时候，要延迟，再跨域操作。
3.作者很早(2009年)发布的了，所以可能对一些浏览器不支持，自己调整啦。

文章转自：MyDate97日历控件和 Jquery 做成的工作日维护

上面有提供的代码，另外我也打包了一个demo版本，就在下面↓。

http://pan.baidu.com/s/1cTbGU

让Nginx支持中文URL和中文目录

[ 前端攻城 ] 2014年3月6日

1.确定系统是不是uft8编码

env|grep LANG
LANG=en_US.UTF-8

2.Nginx配置文件设置默认编码为uft-8

server
{
    listen 80;
    server_name idayer.com ;
    index index.html index.htm index.php;
    root /usr/local/nginx/html/;
    charset utf-8;
}

3.用工具上传的时候，注意默认编码也是为uft-8

4.处理已经上传的中文名文件

在其目录中执行：

for f in `ls *.html` ; do mv $f `ls $f¦iconv -f GBK -t UTF-8`; done

注意：上面代码执行过的文件，如果被代码再次处理，会导致文件无法在winscp里面删除。

为iPhone4开启相机的实时滤镜-iOS7

[ iOS ] 2014年2月28日

iPhone4在现在算是古老的设备了，即将失去苹果的支持。iOS7中iPhone4的相机没有了实时过滤功能(Live Filter),当然了还有其他方面的特性也会取消了，着实让人感觉苹果不厚道。好在这些功能不是在固件里面被阉割，可以另外开启。

使用Theos开发一个锁屏Tweak

[ iOS ] 2014年2月16日

iOSOpenDev是一款简化越狱开发的工具，它包含了开发中用的到一切，并且是使用Xcode开发，自动创建deb文件。不过不少开源的Cydia插件都是直接使用theos开发，所以最近主要学习了关于theos的使用，介绍如何制作一个锁屏插件。

理想乡

享受生活,享受每一天.

什么是npm系列：二、install 的十八般武艺

1. npm install

1.1 npm install `<folder>`

1.2 npm install `<tarball file or url>`

1.3 npm install `<git remote url>`

1.4 npm install `<githubname>/<githubrepo>[#<commit-ish>]`

1.5 从github gist安装

1.6 从bitbucket安装

1.7 从gitlab安装

2. 附加参数

4. 预告

系列汇总

什么是npm系列：一、npm简介

微信小程序的自动化发布之路

微信小程序的自动化发布之路

环境准备

内网穿透神器FRP

frp

2048

使用MyDate97控件制作节假日管理的前端

让Nginx支持中文URL和中文目录

1.确定系统是不是uft8编码

2.Nginx配置文件设置默认编码为uft-8

3.用工具上传的时候，注意默认编码也是为uft-8

4.处理已经上传的中文名文件

为iPhone4开启相机的实时滤镜-iOS7

使用Theos开发一个锁屏Tweak

1. npm install

1.1 npm install <folder>

1.2 npm install <tarball file or url>

1.3 npm install <git remote url>

1.4 npm install <githubname>/<githubrepo>[#<commit-ish>]

1.5 从github gist安装

1.6 从bitbucket安装

1.7 从gitlab安装

2. 附加参数

4. 预告

系列汇总

微信小程序的自动化发布之路

环境准备

frp

1.确定系统是不是uft8编码

2.Nginx配置文件设置默认编码为uft-8

3.用工具上传的时候，注意默认编码也是为uft-8

4.处理已经上传的中文名文件

1.1 npm install `<folder>`

1.2 npm install `<tarball file or url>`

1.3 npm install `<git remote url>`

1.4 npm install `<githubname>/<githubrepo>[#<commit-ish>]`