本文主要讲解前端构建工具
npm的学习使用，旨在为初学者可以快速的进行使用，
一、安装与初始化
软件安装
使用npm 需要安装nodejs,可到官网进行下载安装，安装推荐使用稳定版，下载后根据提示安装即可，本文不展开安装过程描述
node下载地址： 点击去官网下载
初始化git
在使用 npm 之前，需要先对当前的目录进行初始化：
npm init可以先运行 npm init -h 对init的参数做更详细的了解：
npm init -h
npm init
Usage:
npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as `npx <@scope>/create`)
npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)
aliases: create, innit
Run "npm help init" for more info
这里面提示 npm help init 可以看到更多的操作指南，就不赘述了。
直接运行 npm init 的时候，会有一步一步的提示，让开发者输入相应的信息。之后在当前目录就会产生我们熟悉的 package.json 文件了。
如果不想这么麻烦，可以直接 npm init -y 来跳过输入步骤。
建议在进行 npm 初始化之前，先对目录做 git 初始化，这样的好处是，在 npm init 时， repo 项会自动填充为 git 的 origin 源。
git init
git remote add origin git://xxxxx
初始化总结
- 在使用 npm 之前，应当使用
npm init对目录进行初始化，创建package.json文件。 - 使用
npm init -y来跳过初始化交互过程。 - 建议先进行
git init，并配置好 origin 源。
二、包管理
安装npm包
执行命令
npm install <package-name>
#也可以简写为
npm i <package-name>
同时安装多个包
npm i <package1> <package2> <package3> ...安装全局包
npm install -g <package-name>
三、依赖层级
包有两个依赖层级： 项目依赖 和 开发依赖 。
项目依赖的意思是，当前项目发布运行需要该包支持，那么在使用 webpack 之类进行打包时，该包应当被打入到最后的package中。比如 react redux antd 之类。此类包会标记在 package.json 中的 dependencies 字段。
开发依赖中的包，当前项目对其不应有运行依赖，一般都是围绕项目编译、打包、集成等做辅助工作的周边工具。比如 webpack 以及各种 babel 插件。此类包会标记在 package.json 中的 devDependencies 字段。
当然，在项目打包期间，打包工具会做 treeshake 动作来晃掉未使用的包，但维护一个严谨的package依赖关系，应当是前端在管理项目时要重点关注的事情，更何况 treeshake 也是有局限的。
安装项目依赖
npm install <package-name>
npm install <package-name> --save
npm install <package-name> -S
# 安装开发依赖
npm install <package-name> --save-dev
npm install <package-name> -D
一个真实的 package.json 代码：
{
...
"dependencies": {
"@babel/core": "^7.14.6",
"@babel/plugin-transform-react-jsx": "^7.14.5",
"chalk": "^2.4.2",
"commander": "^7.2.0",
"md5": "^2.3.0",
"watch": "^1.0.2"
},
"devDependencies": {
"@types/babel__core": "^7.1.14",
"@types/md5": "^2.3.0",
"@types/watch": "^1.0.1",
"ts-node": "^10.0.0",
"typescript": "^4.3.4"
}
}四、卸载包
# 卸载项目依赖
npm uninstall -S <package-name>
# 卸载开发依赖
npm uninstall -D <package-name>
# 卸载全局包
npm uninstall -g <package-name>
五、全局包
就像 webpack-cli 或者 create-react-app 之类的工具，当 npm 安装其为全局时，这些包可以被当成一个工具，在 bash 命令中直接运行。
安装全局包有几个地方需要注意：
安装位置是否在环境变量中做了配置？否则会无法执行。
一些类似nvm的工具，会对 -g 的包按 node 版本进行安装，切换 node 版本之后可能会找不到该包，或者出现问题1的情况。
Mac系统中，如果是从官网下载dmg包安装，在安装 -g 时需要 sudo ，同样 uninstall 也需要 sudo 。建议使用 Homebrew 安装 node 。
像 webpack ts-node tsc 这些工具，可安装为项目的开发依赖，通过 npm 运行，不必安装为 -g 。这样做的好处是， 项目与开发环境解耦 。下面是在开发依赖中配置 ts 编译器、在 scripts.build 中对 ts 文件进行编译的例子：
{
"scripts": {
"build": "tsc ./src/*.ts --esModuleInterop -d -t ES5 --lib es5 --outDir dist"
},
"devDependencies": {
"typescript": "^4.3.4"
}
}
package-lock.json
用来锁定安装包的版本号。
这个文件有可能造成一些问题，比如锁定的低版本已经从 npm 源下线了。
所以当对版本没有强要求，或者是对包作者足够信赖时，我一般会把这个文件放入 .gitignore 。而需要锁定的版本，直接在 package.json 中写死。
六、关于版本号
版本号中 ^ 字符，经测试是不会跳大版本的。
比如 npm i webpack@^3 ，只会安装webpack3的最新版本，并不会安装webpack4甚至webpack5。
如果想安装最新版本，使用 @latest 版本号
npm i <package-name>@latest
评论 (0)