nodeJs 是一个基于 V8 引擎的服务器端 JavaScript 运行环境。
对于前端开发者来说node最大的作用是帮助我们完成获取依赖,构建项目,编译代码等工作。
NodeJs 自带的包管理器 npm,是全球最大的开源库生态系统。

但是由于本国特殊的网络环境,经常会出现各种各样的问题。
以下是本人使用过程中踩过坑的应对手段:

起步

安装 nodeJs & npm

初次可直接从官网下载安装(内含最新版的 nodeJs 和 npm) https://nodejs.org

管理 nodeJs 版本

  1. 安装 n 模块

    1
    $ sudo npm install -g n
  2. 升级 nodeJs

    1
    2
    3
    4
    5
    6
    7
    8
    # Use or install the latest official release:
    $ n latest

    # Use or install the stable official release:
    $ n stable

    # Use or install the latest LTS official release:
    $ n lts
  3. 切换 nodeJs 版本

    1
    2
    3
    4
    $ n

    4.6.0
    ο 6.8.0
  4. 删除 nodeJs 版本

    1
    $ n rm 0.9.4
  5. n 模块 github 地址:https://github.com/tj/n

  6. 注意:windows 系统不适用以上方法

    • windows 直接在官网下载最新版本,覆盖安装来升级 nodeJs 版本
    • win10自带的 Ubuntu bash 代码行也可以试一下(未测试过)

MAC系统 npm 需要管理员权限问题(未测试)

1
$ sudo chown -R $USER /usr/local

win使用nvm-windows安装&管理node版本

  1. 安装nvm-windows
  2. 在命令行输入nvm验证安装成功
  3. 常用命令
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 查看已安裝的Node版本
    $ nvm list

    # 查看提供哪些Node版本
    $ nvm list available

    # 安裝指定的Node版本
    $ nvm install [version]

    # 指定使用Node版本
    $ nvm use [version]

管理 npm 模块管理器

升级 npm 的版本

  • 通用
    1
    $ npm install npm@latest -g
  • windows 平台插件: npm-windows-upgrade
    1
    2
    $ npm i -g npm-windows-upgrade
    $ npm-windows-upgrade

升级 npm 依赖包

npm-check是用来检查npm依赖包是否有更新、错误以及是否在使用的,可以方便的使用npm-check进行包的更新

  1. 安装npm-check

    1
    $ npm install -g npm-check
  2. 检查全局的 npm 包是否可升级

    1
    $ npm-check -u -g

淘宝NPM镜像cnpm (不推荐,用yarn代替目前好像出错率好多了)

  1. 安装cnpm

    1
    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
  2. 用cnpm安装模块

    1
    $ cnpm install [name]

npm 个人常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# 查看 npm 的版本
$ npm -v

# 为npm init设置默认值
$ npm set init-author-name 'cycjimmy'
$ npm set init-author-email 'cycjimmy@gmail.com'
$ npm set init-author-url 'https://github.com/cycjimmy'
$ npm set init-license 'MIT'

# 初始化生成一个package.json文件。
# 使用 -y 可以跳过提问阶段,直接生成package.json文件
$ npm init -y

# 列出当前项目安装的所有模块包
$ npm ls --depth=0

# npm install默认会安装dependencies字段和devDependencies字段中的所有依赖包
$ npm i
# 针对国内可以加上参数
$ npm --registry=https://registry.npm.taobao.org i

# 安装依赖包
# –save:添加到dependencies,可简化为-S
# –save-dev: 添加到devDependencies,可简化为-D
$ sudo npm i -g [package name]
$ npm i [package name]
$ npm i [package name] -S
$ npm i [package name] -D

# 更新依赖包
# -S表示保存新的依赖包版本号到package.json
$ npm update <package name> -S
# npm update只更新顶层依赖包,而不更新依赖的依赖,如果想递归更新取,使用下面的命令
$ npm --depth 9999 update

# 卸载依赖包
$ npm uninstall [package name]
$ npm uninstall [package name] -global

# 执行任务
$ npm run [task name]

# 针对国内的设置
$ npm config set registry=http://registry.npmjs.org

# 使用XX-Net的可设置下http代理
$ npm config set proxy http://127.0.0.1:8087
$ npm config set https-proxy http://127.0.0.1:8087
$ npm config set strict-ssl false -g

# 还原设置
$ npm config delete registry
$ npm config delete proxy
$ npm config delete https-proxy
$ npm config delete strict-ssl

# 列出所有npm配置项目
$ npm config ls -l

strict-ssl 需手动修改 .npmrc 文件(located in \Users\ in Windows)

1
2
# .npmrc文件中添加
strict-ssl=false

其他比较详细的npm命令查看

用yarn取代npm

Yarn is a package manager for your code.

  1. 安装(升级)yarn

    1
    $ npm install -g yarn
  2. yarn常用命令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    # npm init =>
    $ yarn init

    # npm install =>
    $ yarn install
    $ yarn install --force #强制所有包重新下载

    # npm install --save [package] =>
    $ yarn add [package]

    # npm install --save-dev [package] =>
    $ yarn add [package] --dev

    # npm install --global [package] =>
    $ yarn global add [package]

    # rm -rf node_modules && npm install =>
    $ yarn upgrade [package]
    $ yarn upgrade [package] --ignore-engines #忽略引擎

    # npm uninstall --save [package] =>
    # npm uninstall --save-dev [package] =>
    $ yarn remove [package]

    # npm cache clean =>
    $ yarn cache clean

    # 针对国内的设置
    $ yarn config set registry https://registry.npm.taobao.org

    # 使用XX-Net的可设置下http代理
    $ yarn config set proxy http://127.0.0.1:8087
    $ yarn config set https-proxy http://127.0.0.1:8087
    $ yarn config set strict-ssl false -g

    # 还原设置
    $ yarn config delete registry
    $ yarn config delete proxy
    $ yarn config delete https-proxy
    $ yarn config delete strict-ssl
  3. yarn的 strict-ssl 配置目前存在BUG,需手动修改 .yarnrc 文件(located in \Users\ in Windows)【yarn/issues#980

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 进入vi修改.yarnrc
    $ vi ~/.yarnrc

    # .yarnrc内容:
    # ------------------------------------------------------------------
    # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
    # yarn lockfile v1
    strict-ssl false

    # ------------------------------------------------------------------
    # 修改完毕输入 :wq 保存退出

国内抓取node-sass失败的解决方案

1
2
3
4
5
# 使用淘宝镜像
$ SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

# 或者使用淘宝镜像cnpm
$ cnpm install node-sass

发布node模块到npm社区

  • npm官网注册账号,或使用命令行:

    1
    $ npm adduser
  • 登陆账号

    1
    2
    3
    4
    5
    # via npm
    $ npm login

    # via yarn
    $ yarn login
  • 验证登陆

    1
    $ npm whoami
  • 更新包版本号x.y.z, 通用版本号迭代规则:

    • 如果只是修复bug,更新z
    • 如果是新增了功能,但是向下兼容,更新y
    • 如果有大变动,向下不兼容,更新x
  • 发布

    1
    2
    3
    4
    5
    # via npm
    npm publish

    # via yarn
    yarn publish

搭建一个静态博客是去年的学习计划之一,然而因为种种原因(其实是拖延症加懒癌),迟迟没有动手。直到最近,空余时间慢慢富裕了起来,才想“要不把去年想做的博客给做了?”,那么说干就干。

简单谷歌了下相关资料,决定采用Hexo博客系统加NexT主题的方案搭建。本以为会花很点时间,没想到当前的静态博客系统功能居然已经如此完善,自己能想到的功能它几乎全有,要做的就是按照自己需求和喜好去改里面的配置文件。大概花了半天时间改配置,一切就OK了!

注:本文使用的Hexo版本为v3.3.7,NexT版本为v5.1.1

搭建当中遇到的一些坑

删除文章后,分类和标签统计不正确

  1. 删除目录下的 db.json 文件

  2. 清理 public 文件夹并重新生成

    1
    2
    $ hexo clean
    $ hexo generate
  3. 重启测试服务器(或重新部署)

    1
    2
    3
    $ hexo server
    # or
    $ hexo deploy --generate

静态文件全部没有经过压缩,不能忍

一开始的想法是用 gulp 写几个任务随便搞下,然后就建了个gulp任务文件待定。

后面随便翻hexo插件时候,发现了一个名叫hexo-all-minifier,我这种懒癌患者肯定是马上试用,然后就没有然后了,问题解决,我立马删除了gulp文件。

又发现了个更好用的插件hexo-filter-cleanup,不仅能压缩,还能合并JS(插件集成了useref)。
但是合并JS里面也有一个大坑,原以为我把主题里用到的JS一股脑打成一个包就OK了(如下)

NexT主题->layout->_layout.swig
1
2
3
4
5
6
7
8
9
10
11
12
<!-- build:js /js/theme-files.min.js -->
{% include '_scripts/commons.swig' %}

{% set scheme_script = '_scripts/schemes/' + theme.scheme | lower + '.swig' %}
{% include scheme_script %}

{% block script_extra %}
{% include '_scripts/pages/post-details.swig' %}
{% endblock %}

{% include '_scripts/boostrap.swig' %}
<!-- endbuild -->

完成!少了将近7个请求,非常兴奋,立马部署了上去。然而部署了半天之后才发现部分页面出了一点小问题,归档页面的年份标签不见了!经过了半天时间排查,才总算锁定的问题,解决如下:

NexT主题->layout->_layout.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- build:js /js/theme-common.min.js -->
{% include '_scripts/commons.swig' %}

{% set scheme_script = '_scripts/schemes/' + theme.scheme | lower + '.swig' %}
{% include scheme_script %}

{% include '_scripts/boostrap.swig' %}
<!-- endbuild -->

# 以下JS文件为判断script_extra添加,在合并打包时造成编译失误,需要单独处理
{% block script_extra %}
<!-- build:js /js/theme-extra.min.js -->
{% include '_scripts/pages/post-details.swig' %}
<!-- endbuild -->
{% endblock %}

NexT默认从本地加载很多JS库

建议务必替换成CDN,不然都会从当前站点获取这些库文件。
在NexT主题的 _config.yml 配置中找到 vendors,网上找到相应的CDN地址填入。

部分未解决的坑

  • 二级域名无法配置404页面 线上版本已经可以访问,测试服务器中仍然不行

关于SEO

其他相关