angular 4 构建过程.md

前言

前端目前的工作，除了日常研发工作外，有相当一部分是在构建环境，其中涉及面很广，在不同的操作系统、开发平台、框架之间存在很多的问题，而且比较琐碎。

以下讲解基于macOS操作系统。

angular 4 构建过程

• git仓库

  • 拉取远程仓库
    通常有两种方式从远程服务器拉取仓库，https和ssh。
    github两种都支持，但不是所有的远程服务器都支持这两种方式，一些中小型公司可能只支持其中一种。
    ssh方式步骤：

    • 生成公钥/私钥
      进入目录/.ssh，检查是否有旧的公钥和私钥，避免被新生成的覆盖。

      执行以下命令，生成公钥私钥：

      ssh-keygen -t rsa -C "[email protected]"
      

      id_rsa是私钥，id_rsa.pub是公钥。

      

      公钥私钥目录.png

    • 在远程服务器网站，添加公钥
      复制公钥id_rsa.pub中的内容，登录远程仓库管理网站，执行add key操作。

    • 拉取仓库

      git clone [email protected]
    

  • 远程仓库异常

      remote: error: unable to create temporary file: No space left on device
      remote: fatal: failed to write object
      error: unpack failed: unpack-objects abnormal exit
    

    执行pull/push操作，如果报上面的错，代表远程服务器挂了，请联系运维工程师。

• nvm升级node和npm版本

    ## 查看当前所有版本
    nvm ls
    ## 查看远程服务器版本
    nvm ls-remote
    ## 安装其他版本node
    nvm install v6.10.2
    ## 设置默认版本
    nvm alias default v6.10.2
  

  nvm use v6.10.2只在当前shell中有用，新打开一个shell后就会失效。
  nvm alias default v6.10.2对所有shell窗口都有用。

  理论上是这样，但是我按照以上设置，新打开窗口后仍然不起作用。

  解决方案：
  打开.zshrc，将以下两行放在最后面，否则$path将被覆盖。

  export NVM_DIR="/Users//.nvm"
  [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm

• npm全局变量路径

  在nvm更改node版本之后，发现一些全局安装的命令工具，提示command not found。

  ## 查看npm全局变量路径
  npm config get prefix

得到结果`/Users//.nvm/versions/node/v6.10.2`，这代表平时执行`npm install -g xxx`后，包的安装目录是当时版本node的路径。
所以当我改变node版本后，在当前版本的目录中也就找不到原来安装的工具了。

尝试一：

```
  ## 设置npm全局变量路径：
  npm config set prefix /usr/local/lib/node_modules
  ## /usr/local/lib/node_modules是默认的路径
```

因为暂时必须要使用nvm，而`.zshrc`中的配置会影响`$path`，所以即使改成以上路径，仍然找不到命令。而且nvm会报错

```
  nvm is not compatible with the npm config "prefix" option: currently set to "/usr/local"

Run npm config delete prefix or nvm use --delete-prefix v5.7.1 --silent to unset it.
```

每换一次node版本，就重新安装一次这些工具，这样太过于繁琐了。

解决方案：
折中的解决方案，将.nvm/versions/node/v6.2.0中的bin和lib/node_modules中的文件拷贝到.nvm/versions/node/v6.10.2的对应目录中。

• 安装@angular/cli
  由于某些原因，使用npm下载国外的依赖，会很慢(卡住！！！)；

  安装cnpm

    npm install -g cnpm --registry=https://registry.npm.taobao.org
  

  使用cnpm 安装angular/cli

• 创建angular项目

  ng new app –skip-install

  使用参数--skip-install跳过依赖的安装，否则会等很久。

• 设置淘宝镜像

    npm config set registry https://registry.npm.taobao.org 
  

参考

使用nvm管理不同版本的node和npm
设置default版本后仍然失效的原因
nvm prefix 报错
设置淘宝镜像