库推荐
nrm
nrm can help you easy and fast switch between different npm registries, now include: npm, cnpm, taobao, nj(nodejitsu).
npm install -g nrm
nrm ls
nrm use tencent
Website
安装 Node.js
推荐使用 proto 安装管理 Node.js。proto 是一个现代化的多语言版本管理工具，支持 Node.js、Bun、Deno、Go、Rust 等多种语言运行时。
安装 proto
# macOS / Linux
curl -fsSL https://moonrepo.dev/install/proto.sh | bash
# Windows
irm https://moonrepo.dev/install/proto.ps1 | iex
安装完成后重启终端或执行 source ~/.bashrc（或对应的 shell 配置文件）。
安装 Node.js
# 查看可用版本
proto list-remote node
# 安装最新 LTS 版本
proto install node lts
# 安装指定版本
proto install node 20.10.0
# 查看已安装版本
proto list node
# 切换全局默认版本
proto pin node lts --global
# 查看当前版本
node -v
项目级版本管理
在项目根目录创建 .prototools 文件：
node = "20"
npm = "10"
进入项目目录时 proto 会自动切换到指定版本。
npx
调用项目安装的模块
npx 是 npm 的自带模块，可以直接使用，手动安装为：
npm install -g npx
npx - execute npm package binaries. 它解决的问题是：更方便的从本地 node_modules/.bin 或中央缓存中执行命令。
比如项目安装了 gulp 需要执行命令时需要：
node_modules/.bin/gulp -v
如果使用 npx 只需要：
npx gulp -v
npx 的原理很简单，就是运行的时候，会到 node_modules/.bin 路径和环境变量 $PATH 里面，检查命令是否存在。由于 npx 会检查环境变量 $PATH，所以系统命令也可以调用。
# 等同于 ls
npx ls
注意，Bash 内置的命令不在 $PATH 里面，所以不能用。比如，cd 是 Bash 命令，因此就不能用 npx cd。
避免全局安装模块
create-react-app 这个模块是全局安装，npx 可以运行它，而且不进行全局安装：
npx create-react-app my-react-app
上面代码运行时，npx 将 create-react-app 下载到一个临时目录，使用以后再删除。以后再次执行上面的命令，会重新下载 create-react-app。
注意，只要 npx 后面的模块无法在本地发现，就会下载同名模块。比如，本地没有安装 http-server 模块，下面的命令会自动下载该模块，在当前目录启动一个 Web 服务。
npx http-server
--no-install 和 --ignore-existing 参数
如果想让 npx 强制使用本地模块，不下载远程模块，可以使用 --no-install 参数。如果本地不存在该模块，就会报错。
npx --no-install http-server
反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用 --ignore-existing 参数。
使用不同版本的 Node
可以指定某个版本的 Node 运行脚本，某些场景下，这个方法用来切换 Node 版本，要比 nvm 那样的版本管理器方便一些。
npx node@0.12.8 -v
v0.12.8
-p 参数
-p 参数用于指定 npx 所要安装的模块，所以上一节的命令可以写成下面这样。
npx -p node@0.12.8 node -v
v0.12.8
上面命令先指定安装 node@0.12.8 ，然后再执行 node -v 命令。
所以开头时的疑问 npx -p touch nodetouch gulpfile.js 也就解答了，就是先安装 touch 在执行 nodetouch gulpfile.js。
执行 GitHub 源码
# 执行 Gist 代码
npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32
# 执行仓库代码
npx github:piuccio/cowsay hellos
注意，远程代码必须是一个模块，即必须包含 package.json 和入口脚本。
ES6 箭头函数与 jQuery this
当 jQuery 和箭头函数一起使用时，$(this) 的含义会发生变化。箭头函数不会创建自己的 this 上下文，而是继承父作用域的 this。
// 问题代码
$('.js-bottom-btn').click(() => {
let flag = $(this).data('flag'); // this 不是被点击的元素
});
解决方案
方法 1: 使用传统函数
$('.js-bottom-btn').click(function() {
let flag = $(this).data('flag');
});
方法 2: 使用事件参数
$('.js-bottom-btn').click(event => {
let flag = $(event.currentTarget).data('flag');
});
.each() 中的类似问题
// 问题代码
$("jquery-selector").each(() => {
$(this).click();
});
// 正确写法
$("jquery-selector").each((index, element) => {
$(element).click();
});
– EOF –