前端构建工具（2） -- npm&yarn

zhangke3016 发布于2019-08-22 16:30 / 2613人阅读

摘要：如果使用了代表代表，则跳过提问阶段，直接生成一个新的文件。

前言

简介:
node的包管理器,它随nodejs一起安装，即你安装了nodejs就可以用npm进行包管理，通过npm可以从npm服务器下载别人上传的第三方库，下载并安装别人上传的命令行程序，上传自己写的第三方库和命令行程序
可用npm -v查看npm版本号确定npm是否可用，如果npm版本过低，可以使用npm -install npm -g 进行升级

package.json：
package.json是项目的配置文件，npm会按照package.json中的配置进行包的安装和更新，package中有内容主要是项目名称name,版本version,拥有者author,证书license,依赖dependencies,开发环境依赖devdependencies等,更新包时，每次都按照package.json都下载大版本相同的最新包

package-lock.json:
package-lock.json中固定依赖包的版本到当前所用的包版本号，而不是只固定大版号，这样可以避免有些包虽然大版本号相同，但是接口不兼容。

1、安装包

1.0 安装

$ npm install  
$ npm install  --force
$ npm install  [-g||-global]  [--save -dev]

机制：安装前npm　install会先检查node_modules目录里是否已经存在包，如果无则安装，如果有无论远程仓库有没有最新版本都不安装，若希望无论是否存在都重新安装，则强制安装：npm　install （包名） --f/--force

1.1 全局安装：

npm install < packageName> -g  || -global

参数 -g / -global 代表安装到全局环境中，即包安装在Node安装目录下的node_modules文件夹中，一般在 Users用户名AppDataRoaming pm ode_modules,并且写入系统环境变量，可以通过命令行在任何位置调用它，一般全局安装的是有命令行需求的packge

1.2 本地安装：

npm install package-name || npm install package-name --save -dev

本地安装，包安装在当前定位目录的node_modules文件夹下，通过require()调用，一般安装在本地的是仅该项目需要的包

参数--save 的含义是代表把你的安装包信息写入package.json文件

-dev 将安装包信息写入devDependencies字段中，如果不使用-dev则信息写入Dependencies字段中

注：使用packge.json是因为npm安装的包很大，所以不加入版本管理，将包版本信息加入package.json进行版本管理，npm根据该信息进行包版本管理

1.3 package-lock.json
执行npm install 的时候之后项目中会增加一个package.json文件

2、其余常用命令行

2.1 更新已经安装包

$ npm update

机制：先查询远程仓库最新版本，再查询本地版本，若不是最新则更新

2.2查看npm的帮助

$ npm help

2.3 查看已经安装的包列表

$ npm list

2.4 初始化 package.json 文件

npm init

初始化生成一个新的 package.json 文件。它会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的package.json 文件。

3、淘宝镜像cnpm

npm 安装包的过程就是从http://registry.npmjs.org网站上进行下载和安装，但是用于该网站在国外，国内进行安装速度一般比较慢，所以淘宝团队搭建了一个镜像服务器http://npm.taobao.org ,该服务器每十分钟进行一次更新，完全复刻国外的服务器，但是不能上传包，只能下载安装更新
配置淘宝镜像：

npm install cnpm -g -registy="http://npm.taobao.org"

配置完成之后可以用cnpm代替npm进行安装包，配置完后检查是否配置成功

cnpm -v

4、npm与yarn

yarn诞生比较晚，但诞生之后就迅速受到热捧，并在github上得到start超过npm,yarn一开始是为了解决npm语义版本控制导致安装不确定性的问题

待续

云服务器 GPU云服务器前端构建 js 2&amp&amp1 构建工具 android构建工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94413.html

(译 &amp; 转载) 2016 JavaScript 后起之秀

摘要：在年成为最大赢家，赢得了实现的风暴之战。和他的竞争者位列第二没有前端开发者可以忽视和它的生态系统。他的杀手级特性是探测功能，通过检查任何用户的功能，以直观的方式让开发人员检查所有端点。 2016 JavaScript 后起之秀本文转载自：众成翻译译者：zxhycxq链接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...

darry 2019-08-20 14:04 评论0 收藏0
前端开发环境如何搭建

1、node环境与开发工具准备前端工程化开发，本地启动开发环境都是基于nodejs的，命令行里输入指令node -v可以帮助确认您的电脑上是否安装了node，如果没有安装，则可以去 node官网下载安装包，如下图所示：不管是在windows还是在mac环境下，都是一键傻瓜式安装，甚至连环境变量都不需要手动配置，这里就不过多介绍了。2、开发工具准备前端的开发工具，常见的有VSCode、WebS...

社区管理员 2022-10-08 15:06 评论0 收藏0
Yarn 构建工具入门基础

摘要：就是一个类似于的包管理工具，它是由推出并开源。二的安装用法和基本工作流安装以为例你可以通过包管理工具安装。在使用一个包之前，你需要执行以下命令将其加入依赖项列表会被加入到文件中的依赖列表，同时也会被更新。一、yarn的背景和介绍一直以来，我们在安装和管理依赖的时候基本上都会使用npm，npm是一个非常优秀全面且广受欢迎的包管理工具，它奠定了前端模块化开发的基石，为前端的发展做出了不可...

tuniutech 2019-08-23 11:58 评论0 收藏0
Laravel学习笔记三-前端工作流

摘要：本节将学习是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令来强制安装所有模块，不管该模块之前是否安装过由于国内墙的原因，使用安装会非常缓慢，慢到想切，不过还好，我们可以使用淘宝提供的国内镜像进行下载。本节将学习 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。一、句法强大的样式表Sass Sass 是一种可用于编写CSS的语言...

liuchengxu 2019-06-27 15:14 评论0 收藏0
解析ahooks整体架构及React工具库源码

　这是讲 ahooks 源码的第一篇文章，简要就是以下几点：　　加深对 React hooks 的理解。　　学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。　　培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。　　注：本系列对 ahooks 的源码解析是基于v3.3.13。自己 folk 了一份源码，主要是对源码做了一些解读，可见详情。　　第一篇主要介绍 a...

3403771864 2022-11-06 18:34 评论0 收藏0