环境筹备
装置 node
的环境
学习 npm
包治理首先得要装置好 Node.js
环境, 这个就自行搜寻查看相干教程装置,这里不具体开展细说了
更新 npm
工具版本
Node.js
自带 npm
, 然而个别自带的npm
版本会比最新版要低一下,能够手动更新 npm
的版本到最新
npm install npm@latest -g
npm
账号注册
咱们公布包到 npmjs
上,那么咱们就须要有一个本人的 npm
账号,大家能够通过
npm 官网自行注册,以便后续学习应用。
npm
的根本应用
一、体验初始化 npm
我的项目
在筹备好环境后,咱们先来体验一下初始化 npm 我的项目的流程。输出 npm init
命令后,依照提醒输出对应内容,这里咱们临时不须要输出任何内容,始终回车让其放弃为空就行。
-
在指定门路下应用 terminal 工具执行以下命令,创立一个新文件夹, 并切换到该目录下
mkdir npmtest cd npmtest
-
执行
npm
初始化命令,而后始终回车,会呈现以下输入npm init /* This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (npmtest) version: (1.0.0) description: git repository: keywords: author: license: (ISC) About to write to ***********\npmtest\package.json: { "name": "npmtest", "version": "1.0.0", "description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"keywords": [],"author":"", "license": "ISC" } Is this OK? (yes) yes */
-
执行完初始化命令后,在我的项目目录文件中会呈现一个
package.json
文件,文件内容如下:{ "name": "npmtest", "version": "1.0.0", "description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"keywords": [],"author":"", "license": "ISC" }
-
此时的目录树结构如下:
├─npmtest | ├─package.json
-
通过这个过程,咱们能够看到应用
npm
包对我的项目进行包装其实是非常简单的,治理也是非常简单,对依赖的治理也很简略,只有一个package.json
文件。二、配置根本用户信息
-
设置初始化默认的用户名、邮箱、license,设置好这个当前就不必咱们本人再一个个依据命令行提醒设置
npm set init.author.email "双引号里填写本人的邮箱" npm set init.author.name "双引号里填写本人的名字" npm set init.license "双引号里填写证书类型" // 例如:我本人设置的默认信息如下 npm set init.author.email "897317986@qq.com" npm set init.author.name "plasma007" npm set init.license "MIT"
-
咱们当初能够应用
npm init -y
命令进行疾速的初始化了npm init -y
-
咱们能够看到在
package.json
文件中,author license
的值就是咱们设置的默认值。Wrote to ****\npmtest\package.json: { "name": "npmtest", "version": "1.0.0", "description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"keywords": [],"author":"plasma007 <897317986@qq.com>","license":"MIT"}
三、创立并公布一个本人的 package
在后面的步骤中咱们曾经体验了如果初始化
npm
我的项目,当初咱们则来创立并公布本人的包。 -
创立一个文件夹,并关上该门路,这里倡议文件夹名称与包名保持一致(要公布的包不能重名,这里应该取一个不同凡响的包名来替换
plasma007-my-npm-test
)mkdir plasma007-my-npm-test cd ./plasma007-my-npm-test
此时的目录树结构:
├─plasma007-my-npm-test |
-
创立一个简略的脚本文件
lib/index.js
(什么名字都能够,用作入口文件个别同包名或者应用 index),写一个简略的函数如下:const printMsg = () => {console.log("This is a message from the demo package"); } module.exports = {printMsg}
此时的目录树结构:
├─plasma007-my-npm-test | ├─index.js
-
npm
初始化我的项目npm init // 按提醒输出我的项目相干信息, 本人输出后命名为输出的名字,package 名能够在前面的 package.json 配置文件中批改 package name: (默认文件夹名) plasma007-my-npm-test // 默认版本号是 1.0.0 同上 version: (1.0.0) // 对包的详细描述 description: 这是我学习 npm 包治理的第一个我的项目尝试 // 入口文件,默认是 index.js entry point: (index.js) // test 命令 test command: // 我的项目的 git 仓库地址,比方 github、gitee 等 git repository: // 关键字 keywords: mytest // 我的项目作者名 author: plasma007 // 包的许可证类型,默认 ISC license: (ISC) MIT
此时的目录树结构:
├─plasma007-my-npm-test ├─lib | ├─index.js ├─package.json
-
初始化我的项目胜利后提醒相干信息已写入
/plasma007-my-npm-test/package.json
中,回车About to write to ****\plasma007-my-npm-test\package.json: { "name": "plasma007-my-npm-test", "version": "1.0.0", "description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"author":"plasma007 <897317986@qq.com>","license":"MIT" } Is this OK? (yes) yes
-
如果还没有登录
npm
账号,则须要先登录,如果登录失败有可能是后文中常见问题列表 1. 无奈登录 npm
的状况,可依照外面的办法解决。npm login // 按提醒输出用户名和明码,明码输出时不显示 Username: plasma007 // 别离输出本人的账号密码 Password:
-
将写好的包公布
npm publish // npm 会提醒很多信息,如果最初没报错 且最初一行是 + xxxx@1.0.0 就代表公布胜利了
-
接下来验证一下本人的包是否已胜利公布。在另外的目录下创立新的目录, 并关上
mkdir testnpm cd ./testnpm
-
npm 装置方才公布的包
npm install
+ 包名,包名是本人的包名,不要写错了。npm install plasma007-my-npm-test
-
创立一个
test.js
文件,引入包里的函数import {printMsg} from 'plasma007-my-npm-test'; printMsg()
-
批改
package.json
文件外面的配置,增加一个启动脚本、批改文件类型为module
{ ..., "script" : {"dev" : "node ./test.js"}, "type" : "module" ... }
-
执行脚本命令,控制台会输入
This is a message from the demo package
, 阐明本人公布的包可能失常引入npm run dev // 显示 > dev > node ./testnpm1.js This is a message from the demo package
NPM 进阶
package 的 README 文件
- 该文件必须在包我的项目的根门路
- 该文件只能追随包版本更新而更新
package 的版本更新
npm version patch // 如果没有预公布号则间接降级小号,如果有预公布则间接去掉
npm publish
package 公布后的地址是https://npmjs.com/package/ 包名
增加疏忽文件
-
计划 1:采纳白名单策略, 在
package,json
中指定打包的文件,这样能够无效避免因为忽略或者其它一些起因导致一些不想公开或者不必要的文上传到公开的仓库中{ ..., "files": ["/lib"] // 肯定要在 /,不然会 */lib 都会被辨认到 ... }
- 计划 2:采纳
.npmignore
文件增加疏忽文件,指定的文件名将不会被打包,然而存在 bug, 有可能某些文件会被打包追随公布而公开
script
脚本命令传参
向 npm
脚本传参须要在参数前加 --
, 而后 JS 脚本通过 process.env. 参数名
来取值,eg:
// 执行脚本命令时,前面追加参数 name="plasma007"
npm run dev -- name="plasma007"
// 脚本文件中取出参数
let name = process.env.npm_config_name;
常见谬误列表
1. 无奈登录 npm
应用 npm login
命令时,如果提醒的信息是 npm notice Log in on https://registry.npm.taobao.org/
则登录时会报错, 这时咱们须要将 npm
源切换回默认源,源切换命令如下:
// 切换回默认的 npm 源
npm config set registry https://registry.npmjs.org/
// 切换到淘宝源
npm config set registry http://registry.npm.taobao.org/
// 查看以后源
npm get registry