[TOC]
# 简介
2009年,美国程序员Ryan Dahl创造了[node.js](node.js)项目,将javascript语言用于服务器端编程。
这标志"Javascript模块化编程"正式诞生:在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。
# node 多版本切换
[Volta Alternatives and Reviews (Mar 2022) (libhunt.com)](https://www.libhunt.com/r/volta)
[Schniz/fnm: 🚀 Fast and simple Node.js version manager, built in Rust (github.com)](https://github.com/Schniz/fnm)
# 安装 包
安装开发时的依赖:`npm i --save-dev xxxx` 简写:`npm i -D xxxx`
安装生产时的依赖:`npm i --save xxxx` 简写:`npm i -S xxx`
- `--save-dev` 是对对开发环境所需依赖的声明(构建工具,测试工具)(会刷新`package.json`文件),
- `--save` 是生产环境所需依赖的声明(开发应用中使用的框架,库)(会刷新`package.json`文件)。
- 使用`npm i`时,会下载 dependencies 和 devDependencies 中的模块;
- 使用`npm i --production`或者注明`NODE_ENV`变量值为`production`时,只会下载 dependencies 中的模块。
比如,你写 ES6 代码,如果你想编译成 ES5 发布那么 babel 就是 devDependencies。
如果你用了 jQuery,由于发布之后还是依赖 jQuery,所以是 dependencies (默认安装位置,[参考](https://www.npmjs.cn/cli/install/))。
但是在 npm 里面除了二进制的依赖,似乎也不用区分是不是dev。
因为使用npm就是自己编译的意思,而不使用npm直接拿编译后的版本的,这些依赖项也看不到。
> `-P, --save-prod`: Package will appear in your`dependencies`. **This is the default unless`-D`or`-O`are present.**
> The `-D` flag is the shortcut for: `--save-dev`. Source: https://www.npmjs.org/doc/misc/npm-config.html
# 加速安装
由于`https://www.npmjs.com`在国内访问不稳定,因此建议使用国内镜向站点。
具体方法如下:
```shell
npm config set registry https://registry.npm.taobao.org # 通过 config 命令设置 registry
npm install xxx -g --registry=https://registry.npm.taobao.org # 通过命令行指定安装
```
## `--loglevel verbose`
**Append the`--loglevel verbose`argument to the command you want to run**and all logs will be shown on STDERR and saved to`npm-debug.log`file in the current working directory.
Example usage:`npm install ionic --loglevel verbose`.
Running the`npm`commands like this, shows the logs in realtime and saves the logs to the directory its running within.
* * *
For permanent solution, just edit the global`npm`configuration. To do this, run`npm config edit`command and add`loglevel=verbose`. Now every`npm`command will show detailed logs
> [npm install - How to see logs from npm installation? - Stack Overflow](https://stackoverflow.com/questions/39412424/how-to-see-logs-from-npm-installation)
## nrm/cgr
[nrm](https://github.com/Pana/nrm) 是 NPM registry 管理工具,或者 cgr
可以自己切换国内镜像同步站点。
```shell
nrm use taobao
nrm ls
```
> [聊聊 NPM 镜像那些险象环生的坑](https://mp.weixin.qq.com/s/2ntKGIkR3Uiy9cQfITg2NQ)
## `~/.npmrc`文件
在该文件中加入:
```shell
disturl=https://npm.taobao.org/mirrors/node/
phantomjs_cdnurl=http://cnpmjs.org/downloads
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
```
或者通过以下命令执行:
```shell
# 设置依赖安装过程中内部模块下载Node的淘宝镜像
npm config set disturl https://npm.taobao.org/mirrors/node/
# 设置常用模块的淘宝镜像
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set sharp_dist_base_url https://npm.taobao.org/mirrors/sharp-libvips/
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set puppeteer_download_host https://npm.taobao.org/mirrors/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
npm config set sentrycli_cdnurl https://npm.taobao.org/mirrors/sentry-cli/
npm config set sqlite3_binary_site https://npm.taobao.org/mirrors/sqlite3/
npm config set python_mirror https://npm.taobao.org/mirrors/python/
```
有了这波操作,再执行`npm i`安装以上模块时就能享受国内的速度了,如果有条件,建议把这些镜像文件搬到自己或公司的服务器上,将`镜像地址`指向自己的服务器即可。
# npm 基本命令
```shell
npm -v # 查看npm版本号
npm init -y # 创建 package.json文件
npm root -g # 查看全局包位置
npm ls/list -g --depth=0 # 快速列出全局安装的顶层模块,去除整个依赖树的打印信息
npm info/view patch-package # info <==>view,查看 patch-package 包在远程 npm 服务器的信息
npm info/view patch-package versions # 查看远程版本信息
npm update patch-package # 更新本地项目的 patch-package
# config 管理 npm 配置文件
npm config set [-g|--global]
npm config get
npm config delete
npm config list [-l] [--json]
npm config edit
npm get
npm set [-g|--global]
npm cache clean 清理缓存
```
> [让人倾倒的 11 个 npm trick ](http://www.zcfy.cc/article/1206)
> [npm 常用命令详解](https://www.cnblogs.com/PeunZhang/p/5553574.html)
## 本地包安装
本地安装,直接本地路径
```
npm i ./@ngapp/core --save
```
`package.json` 文件下内容:
```
"@ngapp/core": "file:@ngapp/core",
```
[NPM包的离线安装](https://www.zcfy.cc/article/offline-installation-of-npm-packages-924.html)
# `npx`
npm@5.2.0 后新增的命令,引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。
当我们执行 `npx parcel index.html` 时,自动先去当前项目下`./node_modules/.bin`目录下找,找不到,再会去 PATH 里找,最后会去临时安装。
`npx` 还允许我们单次执行命令而不需要安装,例如
```shell
npx create-react-app my-cool-new-app
```
npx 甚至支持运行远程仓库的可执行文件,如
```shell
npx github:piuccio/cowsay hello
```
再比如 npx http-server 可以一句话帮你开启一个静态服务器!
```shell
npx http-server
```
npx 将`create-react-app`下载到一个临时目录,使用以后再删除。下次再执行,还是会重新临时安装。
[yarn dlx](https://next.yarnpkg.com/cli/dlx) 功能和 [npx](https://hub.fastgit.org/npm/npx%23readme) 类似。dlx是`download and execute`的简称,这个命令会在本地创建一个临时的环境来下载指定的依赖,依赖下载完成后,它会在当前的工作目录(cwd)中执行这个依赖包含的可执行二进制文件,这个临时的空间会在命令完成后被删除,所以这些操作都是一次性的。
> [npx 使用教程](http://www.ruanyifeng.com/blog/2019/02/npx.html)
> [awesome-npx](https://github.com/suarasaur/awesome-npx)
## 更新项目依赖
在项目根目录运行
~~~
npx npm-check -u
~~~
> [如何更新全局安装的包](npmjs.cn/getting-started/updating-global-packages/)
# `npm init|create `
npm@6 开始,可以 `init` 命令转换为相应的 `npx` 操作,如下所示:
```
npm init react-app-> npx create-react-app
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create
```
任何其他选项都将直接传递给命令,因此`npm init foo --hello`将映射到 `npx create-foo --hello`。
类似 `yarn create`
> [npm-init](https://docs.npmjs.com/cli/init.html)
使用 [npm-check](https://github.com/dylang/npm-check) 有选择性的去升级
# npm包的CDN
[jsDelivr - A free, fast, and reliable CDN for open source](https://www.jsdelivr.com/)
[unpkg](https://unpkg.com/)/[npmcdn](https://www.npmcdn.com/) 是一个快速的、全球性的内容分发网络,为 npm 的所有内容提供服务。
[wzrd](https://wzrd.in/) browserify-as-a-service
[Pika CDN](https://www.pika.dev/cdn)
# npm `@`作用域
scope 就像是模块的命名空间,当模板名称以 `@` 字符开头,则表示为作用域包
```
@scope/project-name
```
每个 npm 用户都有一个以自己用户名为作用域
[使用 npm 作用域管理发布包](http://huang-x-h.github.io/2016/06/09/using-npm-scoped-package/)
# 控制应用程序版本
与手动更改应用程序的版本相比,npm 提供了一些有用的快捷方式来完成这一点。 要增加版本,请在运行 `npm version 加上` major`,`minor `或` patch`:
~~~
// 1.0.0
npm version patch
// 1.0.1
npm version minor
// 1.1.0
npm version major
// 2.0.0
~~~
根据更新应用程序的频率,可以通过在每次部署时增加版本号来节省时间,使用以下脚本:
~~~
{
"predeploy": "npm version patch"
}
~~~
# [node命令行工具之实现项目工程自动初始化的标准流程](https://www.cnblogs.com/walls/p/11337718.html)
# 参考
[前端工程化(5):你所需要的 npm 知识储备都在这了](https://juejin.im/post/5d08d3d3f265da1b7e103a4d#heading-41)
https://docs.npmjs.com/cli/install
[为什么我从 npm 到 yarn 再到 npm?](https://segmentfault.com/a/1190000014716713)
- 讲解 Markdown
- 示例
- SVN
- Git笔记
- github 相关
- DESIGNER'S GUIDE TO DPI
- JS 模块化
- CommonJS、AMD、CMD、UMD、ES6
- AMD
- RequrieJS
- r.js
- 模块化打包
- 学习Chrome DevTools
- chrome://inspect
- Chrome DevTools 之 Elements
- Chrome DevTools 之 Console
- Chrome DevTools 之 Sources
- Chrome DevTools 之 Network
- Chrome DevTools 之 Memory
- Chrome DevTools 之 Performance
- Chrome DevTools 之 Resources
- Chrome DevTools 之 Security
- Chrome DevTools 之 Audits
- 技巧
- Node.js
- 基础知识
- package.json 详解
- corepack
- npm
- yarn
- pnpm
- yalc
- 库处理
- Babel
- 相关库
- 转译基础
- 插件
- AST
- Rollup
- 基础
- 插件
- Webpack
- 详解配置
- 实现 loader
- webpack 进阶
- plugin 用法
- 辅助工具
- 解答疑惑
- 开发工具集合
- 花样百出的打包工具
- 纷杂的构建系统
- monorepo
- 前端工作流
- 爬虫
- 测试篇
- 综合
- Jest
- playwright
- Puppeteer
- cypress
- webdriverIO
- TestCafe
- 其他
- 工程开发
- gulp篇
- Building With Gulp
- Sass篇
- PostCSS篇
- combo服务
- 编码规范检查
- 前端优化
- 优化策略
- 高性能HTML5
- 浏览器端性能
- 前后端分离篇
- 分离部署
- API 文档框架
- 项目开发环境
- 基于 JWT 的 Token 认证
- 扯皮时间
- 持续集成及后续服务
- 静态服务器搭建
- mock与调试
- browserslist
- Project Starter
- Docker
- 文档网站生成
- ddd