工程化项目之 npm和yarn --- LTS

----------------------2020年3月19日更新---------------

先从最基础的版本号开始吧

版本号

{
    'dependencies': {
        'boo': '^2.3.1',     //与2.3.1版本兼容,相当于2.X.X, 即>=2.3.1 < 3.0.0,不改变大版本号。
        'asd': 'http://asdf.com/asdf.tar.gz',   //在版本上指定一个压缩包的url,当执行npm install 时这个压缩包会被下载并安装到本地。
        'adf': 'git://github.com/user/project.git#commit-ish' //使用git URL加commit-ish
        }
};

根据package.json里面的版本来看,如果配置了
"vue": "^2.5.0"表示安装2.x.x里面最高的版本,即使package.json里面显示的版本还是"^2.5.0",实际上已经使用到了最新的 2.latest.latest
"vue": "~2.5.0"表示安装 2.5.x里面最高的版本,就是2.5.latest
"vue": "2.5.5" 这个是recommand方式,这样可以锁住版本某一个版本,当然可以搭配lock文件来使用。

常用的包管理命令

安装包
npm i packageName <options>
补充知识点
-D: --save-dev 写入devDependencies
-S: --save 写入dependencies
-g: --global 全局安装 注意,一定不能使用-G
其中yarn的全局安装方式有些许不同,使用的是global而不是-g
yarn global add packageName

常见报错信息

报错信息npm error sha1
解决方案:
npm cache clean --force,如果使用的是yarn的话,可以使用yarn cache clean
tips: 缓存问题

报错信息:Failed at the [email protected] install script.
解决方案:指的是缺少一个phantom的包,所以才link不成功。注意了,在git bash里面使用命令的时候,不一定要在npm/node_modules里面,因为node_modules里面的是包镜像,改了它也没用,擒贼先擒王,找到源包才是关键。

报错信息:yarn init报错 Can't answer a question unless a user TTY,
解决方案:原因是后面没带上--yes,这样使用就没问题yarn init --yes
tip:默认的入口文件是index.js

报错信息:Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
解决方案:删除本地的node_modules,重新安装
tip:一个项目的插件要么全部用cnpm下载,要么全部用npm下载。当然还有(yarn、npx),统一一点

如何发布一个npm包

- 在镜像源npm官网那注册一个账号 传送门:https://www.npmjs.com/package/npm
- 然后在项目中(package.json)目录下进行npm login
- 最后使用npm publish  -- 谨记不要加包名,这里的语法和yarn link相似
- 注意package.json中的name必须是唯一的,不然会发布不成功
- 设置镜像 yarn/npm config set registry https://registry.npm.taobao.org

tips: 在发布版本前记得要加上版本修改的信息

值得一提

npx 是 npm 5.2+ 版本之后自带的工具,能够帮助我们更高效的执行 npm 软件仓库里的安装包

npx create-react-app my-app 执行以上这条命令 npx 会按以下顺序工作

  1. 先查找当前项目有没 create-react-app
  2. 如果当前项目找不到,会去全局查找 create-react-app
  3. 如果全局还找不到,会帮我们临时从 npm 包仓库安装 create-react-app,不会污染到当前项目,也不会装到全局

查询包的信息

npm info packageName: 查看包的版本
npm view packageName versions:查看当前包的版本信息,有s则代表所有版本,没s代表现在本地的版本
packName --version:查看包的本地版本

yarn/npm: 之前在项目中踩过一个坑,就是无法下载最新改动的包,后来发现是由于yarn缓存造成的,所以,下次遇到下载不到最新包,可以使用yarn cache clean 2020-3-14遇到了同样是缓存问题,还有的就是
版本号对不上。

yarn add packageName@latest: 安装最新的包
yarn cache clean: 清除缓存
yarn upgrade packageName@version: 安装某个版本的包

yarn global dir 展示yarn的全局安装位置
yarn global bin 展示bin的全局安装路径(这里需要注意的是要将yarn下面的node_modules/bin放到环境变量里面去,不然yarn全局安装的包是无法在cmd生效)
yarn global set global-folder .... 设置全局安装包的位置
yarn config list 展示所有的包
npm config ls 展示所有的配置
npm config set .... 设置配置

分别查看npm和yarn的启动程序位置
yarn global bin
npm -g bin

link

npm/yarn link意思是将当前的模块link到全局,而npm/yarn link packName 则是将当前全局的包link到本地项目去;
所以使用npm/yarn link、npm/yarn link PackageName 必须在package.json目录下
yarn link会在C:\user\userName\AppData\Local\Yarn\Data\link下面弄出一个类似快捷键的文件

用法

在需要link到全局环境的包敲下以下命令
yarn/npm link

注意如果link成功后需要需要使用到bin目录下面的文件,但是不成功

原因排查:

  • 查看配置yarn/npm config list
  • 在window上面配置一般存放在user下面.npmrc或者.yarnrc,可以直接去修改
  • 而且他们两者有点不同的就是key/value命名方式上面

思考,link和软连接的关系:

使用命令创建一个空文件夹

MKLINK [[/D] | [/H] | [/J]] Link Target

/D 创建目录符号链接。默认为文件
/H 创建硬链接,而不是符号链接。
/J 创建目录联接。
Link 指定新的符号链接名称。
Target 指定新链接引用的路径

警告信息warning ..\package.json: No license field
解决方案: 将上一级的package.json文件里面添加一个"license": "ISC",
tips:注意提示信息中的两个点,指的是上一层,不是当前层

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章