Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用NPM

使用NPM

作者头像
代码之风
发布于 2018-10-31 03:35:44
发布于 2018-10-31 03:35:44
1.2K00
代码可运行
举报
文章被收录于专栏:马涛涛的专栏马涛涛的专栏
运行总次数:0
代码可运行

Nodejs生态圈很强大,第一个原因就是NPM,因为全球有无数的程序员在NPM中贡献了自己的力量。

为了避免造轮子,我们有时候会用到其他人的劳动成果,比如一些优秀的框架,比如Express,我们直接使用NPM下载下来就可以用了,降低开发成本和时间。

安装

安装好nodejs后就安装好了npm,这时系统自带npm命令

如何使用

以为Express来举例。 npm 的官网可以找到 npm 包。 https://www.npmjs.com/ 例如搜索Express,就会告诉你安装方法和使用方法:

安装Express

新建一个文件夹,然后运行: npm init初始化,一直按回车,它会自动生成package.json 文件,这个后面再说这个文件的作用。 然后 npm install express安装

会出现node_modules文件夹

node_modules文件夹就是所有包安装的位置。 express已经安装到了node_modules文件夹,其他的很多文件都是这个express依赖的包

package.json 文件

我们写一个项目的时候可能会用到很多很多包,这些包可能是一些工具,也可能是框架。我们每使用一个包,就会把这些包下载下来,然后他会放到node_modules目录中。 那么项目如果太大,哪些包安装了哪些没安装,我们如何知道呢?有没有一个机制来记住我们安装的包呢? 有,nodejs提供了一个机制叫package.json。 他是一个文件,他可以记住所有安装的包的信息,包括名称、版本信息。 如果我们迁移项目,我们就能够知道安装了什么包。因为node_modules目录中文件比较大,而且不放在版本控制中(github等),也不是源码的一部分,我们只要知道node_modules里安装的一些包的名字就可以了,根本不需要这个目录的内容。

比如说现在一个同事得到了这一份代码,那么这个node_modules目录中的代码他是不需要的。因为他只需要安装过得这些包的名称就可以了,到他自己的电脑上再安装就可以了。

package.json就是记录所有安装的包的信息的文件。

生成方法

运行npm init初始化一个项目。 他会让你回答一些关于这个项目的信息,一直按回车,因为这些信息后面可以改,最开始使用默认的就好。

然后就会生成一个package.json的文件。

举例:尝试安装Express并查看package.json

npm install --save express

安装之后出现很多包,这些都是express依赖的包。

"dependencies"

安装后出dependencies字段会出现安装的包的详细信息,包括包的名称和版本号。 "dependencies"中文是依赖的意思。

"devDependencies"

devDependencies是开发环境依赖的意思。例如我们用下面的命令行安装gulp npm install --save-dev gulp

开发环境的包会记录在这里 使用--save-dev就是开发环境依赖的一些包,会记录到devDependencies

"scripts"中的"start"

在"scripts"里加入一行"start": "node app.js",

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },

那么如果我们运行npm run start

就会运行"start"里面的命令。

作用:别人下载你的代码之后可能不知道怎么运行你的项目,那么你把这些命令写在start里,那么项目入口文件之类的就一目了然。

使用package.json 命令:npm install

package.json记录了安装包的所有安装信息,那么别人得到这些信息如何把这些包安装下来呢(安装到他的本地) 使用命令npm install就可以了,比如我们现在删掉node_modules,然后再运行npm install 他就会重新安装

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"dependencies": {
    "express": "^4.16.4"
  },
  "devDependencies": {
    "gulp": "^3.9.1"
  }

这两个依赖中的包

全局安装与局部安装的区别

全局安装

比如我们安装webpack npm install -g webpack -g 意思是Global,全局的意思,他会把webpack作为一个命令,一个可执行文件,安装到我们的系统中,以后我们就可以使用这个命令了

局部安装

局部安装只安装到这个项目当前的文件夹中,如果想使用webpack命令,就要运行使用当前项目下的文件,才能运行webpack node_modules/.bin/webpack

Babel举例说明

用Babel举例说明全局安装与局部安装的区别:

命令行转码babel-cli————阮一峰的es6教程

上面代码是在全局环境下,进行 Babel 转码。这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的 Babel。一个解决办法是将babel-cli安装在项目之中。

总结:全局安装的话你的项目不容易更新,因为不同项目使用的babel的版本可能不同,而且你和你团队使用的babel的版本也可能不同。所以要把babel直接安装在项目中。这样其他人拿到项目再安装项目内的babel,就不会出现版本不兼容问题了。

http-server举例说明

再比如我们安装http-server npm install -g http-server

安装在了这个目录下新增的一个文件,叫做http-server

npm install -g的时候安装在全局目录下,npm install不带-g的时候安装在当前目录下,如图

如果是全局安装,那么直接就可以用了,因为Mac中 /usr/local/bin 是包含在path里面的。

如果我直接在命令行里输入http-server,那么会访问到/usr/local/bin这个路径里的http-server文件

如果只安装在了局部的项目里,想用的话就去当前目录下去找http-server这个文件,一样可以用:

命令行的实质就是一个文件而已!全局命令就是装在环境里的文件!局部命令就是放在一个目录里,用的时候需要执行局部文件

切换淘宝源

注意:在国内安装这些包的时候有时候会很慢,因为这些包的服务器在国外。我们可以换一个源,即把服务器换到国内,例如淘宝的源

运行下面的命令即可切换淘宝源

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm config set registry https://registry.npm.taobao.org/
npm config set loglevel http
npm config set progress false

npm 的配置被存储在 ~/.npmrc,你可以随时改。

这是官方网站 https://npm.taobao.org/

安装node-sass的正确姿势

安装node-sass的正确姿势

从 npm 到全面拥抱 yarn

从 npm 到全面拥抱 yarn

个人觉得 yarn 有以下好处:

  1. 超快的下载速度。
  2. 离线下载,如果你懂 ruby,这个有点像 bundle,就是之前下载过一次,这个包就会放到电脑上的一个地方,下次别的项目要使用同一个包的时候就不用下载了,而是做一个链接,这样速度超级快,这一点很重要,npm 饱受诟病的一点就是,每次安装依赖,都需要从网络下载一大堆东西,而且是全部重新下载。工程多的时候比较烦人。这下子可以节约大量时间了。
  3. 拥有 lockfile 文件,在 yarn 中叫 yarn.lock,这个在新版的 npm 也有这个功能,它的文件名叫 package-lock.json,这个文件会记录每次安装的包的版本的精确信息,这样,每次运行 yarn install 就会得到一模一样的依赖环境,而不是会出现个别包的版本不同,从而引发环境问题导致项目运行情况不同的尴尬事件。

安装方法、使用方法、切换源等见链接

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
npm
本来打算暑假将自己每天学到的东西写下来,每天做成一篇文章的,结果现在每周能产出一篇文章就不错了。。。【掩面】。。今天学了点npm命令行操作,就写一下
Ewall
2018/09/04
1.7K0
npm详解
文章目录 npm 是什么? 安装 npm 更新 npm package.json 文件 package.json 如何创建 package.json 的内容 dependencies(生产环境)和 devDependencies(开发环境)的区别 指定安装包的版本 自定义 package.json 安装包文件 引用文件库 npm 是什么? npm(node package manager):node.js 的包管理器,用于node插件管理(包括安装、卸载、管理依赖等) ,npm 是随同 node.js 一
兮动人
2021/06/11
1.6K0
npm详解
vue3.0基础教程(一)
近两年前端技术变革速度太快,vue不论针对web项目开发,网站制作,还是app,小程序开发,都越来越流行,其便捷性及易用程度都让你不得不考虑去学习。
用户1739228
2022/08/30
7700
vue3.0基础教程(一)
探究 npm install 后 node_modules 突然消失的深层原因与解决之道
在 Node.js 的开发过程中,npm install 是一个常见的命令,用于根据项目的依赖配置文件 package.json 安装所有的必要模块。然而,有时你可能会发现,npm install 运行后,node_modules 文件夹短暂地出现,但随后却莫名其妙地消失了。这种现象可能让人感到困惑甚至沮丧。以下内容将从多方面探讨可能的原因和解决方法。
编程小妖女
2025/01/31
3170
探究 npm install 后 node_modules 突然消失的深层原因与解决之道
npm、npm scripts
1、 如何全局安装一个 node 应用? npm install -g <package_name> 上述命令执行之后将会在当前的目录下创建一个 node_modules 的目录(如果不存在的话),然
小胖
2018/06/28
2.3K0
NPM 介绍
NPM 是随同 NodeJS 一起安装的包管理工具,能解决 NodeJS 代码部署上的很多问题,常见的使用场景有以下几种:
acc8226
2022/05/17
8840
大仓实践录:Lerna/NPM/Yarn Workspace 方案组合和性能对比
仓就是仓库(repository,简称 repo)。通常我们使用多个仓库(简称多仓,multi-repo)来管理项目代码,也就是每个仓库负责一个模块或包的编码、构建、测试和发布,代码规模相对较小,所以也称为小型规模仓库(简称小仓)。而单一(mono)仓库(简称单仓,mono-repo)是指在一个仓库中管理多个模块或包,当代码规模达到一定程度后可称为大型规模仓库(简称大仓),至于这个程度大小并没有明确定义,通常说的大仓可理解为就是单仓。
CodecWang
2021/12/07
5.2K0
大仓实践录:Lerna/NPM/Yarn Workspace 方案组合和性能对比
Express 中间件
一种使用方式就是全局安装:npm install -g babel-cli(可以通过 npm root -g 查看全局包安装目录), 只要全局安装了 babel-cli,则会在命令行中多出一个命令:babel。
海仔
2021/05/11
8350
Node.js安装使用-VueCLI安装使用-工程化的Vue.js开发
什么是Node.js简介呢?它是一个基于JavaScript的运行环境,Node.js发布于2009年5月,对Chrome V8引擎进行了封装,是由RyanDahl开发的。Chrome V8引擎执行JavaScript的速度很快且性能好。
达达前端
2019/12/20
1.2K0
Node.js安装使用-VueCLI安装使用-工程化的Vue.js开发
Node入门教程(7)第五章:node 模块化(下) npm与yarn详解
Node的包管理器 JavaScript缺少包结构的定义,而CommonJS定义了一系列的规范。而NPM的出现则是为了在CommonJS规范的基础上,实现解决包的安装卸载,依赖管理,版本管理等问题。 CommonJS是一个致力于构建统一的JS生态系统,它可以兼容web服务器、桌面应用、命令行应用、浏览器等。它定义了各种开发的规范和API不仅仅模块化相关的规范) 官网的说明: a group with a goal of building up the JavaScript ecosystem for we
老马
2018/04/16
1.1K0
前端包管理工具与配置项
任何一个项目的构建离不开工具和统一的管理标准,在项目开发和维护过程中,我们需要了解安装包的相应工具和配置文件,以此来有效的进行项目的迭代和版本的更新,为项目提供基本的运行环境。
程序员海军
2023/11/07
5930
前端包管理工具 npm yarn cnpm npx
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第3天,点击查看活动详情
虎妞先生
2022/10/27
9170
前端包管理工具 npm yarn cnpm npx
webpack打包typescript
相信很多前端的朋友都知道webpack是什么,webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。
玖柒的小窝
2021/09/22
2.2K0
关于现代包管理器的深度思考——为什么现在我更推荐 pnpm 而不是 npm/yarn?
很长时间没有更新原创文章了,但是还一直在思考和沉淀当中,后面公众号会更频繁地输出一些前端工程相关的干货,希望对大家有一些启发,也希望在实际的工作当中帮助大家提升效率。
用户3806669
2021/03/10
3.2K0
npm5 新版功能特性解析及与 yarn 评测对比
前言 前段时间 npm 发布了 5.0 版本,提供了自动记录依赖树,下载使用强校验,重写缓存系统等功能升级和改造,吸引了不少关注。本文将对 npm5 的新功能和变化点在进行实践使用后进行介绍和总结,并和 yarn 进行简单对比。 更新一览 通过官方的 Release note 我们可以看到 npm5 的主要新功能和大改动主要有下面几点(后面将会详细介绍): 默认新增 package-lock.json 来记录依赖树信息,进行依赖锁定,并使用新的 shrinkwrap 格式。 --save 变成了默认参数,执
马铖
2018/01/15
5.7K0
npm5 新版功能特性解析及与 yarn 评测对比
开发中遇到过的 NPM 疑惑解答
https://segmentfault.com/a/1190000039289332
@超人
2021/05/24
1.5K0
开发中遇到过的 NPM 疑惑解答
关于前端大管家package.json,你知道多少
今天来看看前端的大管家 package.json 文件相关的配置,充分了解这些配置有助于我们提高开发的效率,规范我们的项目。文章内容较多,建议先收藏在学习!
程序员法医
2022/08/11
1.6K0
关于前端大管家package.json,你知道多少
大仓实践录:Lerna/NPM/Yarn Workspace 方案组合和性能对比
仓就是仓库(repository,简称 repo)。通常我们使用多个仓库(简称多仓,multi-repo)来管理项目代码,也就是每个仓库负责一个模块或包的编码、构建、测试和发布,代码规模相对较小,所以也称为小型规模仓库(简称小仓)。而单一(mono)仓库(简称单仓,mono-repo)是指在一个仓库中管理多个模块或包,当代码规模达到一定程度后可称为大型规模仓库(简称大仓),至于这个程度大小并没有明确定义,通常说的大仓可理解为就是单仓。
CodecWang
2023/11/17
2K0
大仓实践录:Lerna/NPM/Yarn Workspace 方案组合和性能对比
npm 与 package.json 快速入门
张拭心 shixinzhang
2018/01/05
2.1K0
npm 与 package.json 快速入门
2018 年了,你还是只会 npm install 吗?
作者:rianma | 腾讯web前端开发工程师 nodejs 社区乃至 Web 前端工程化领域发展到今天,作为 node 自带的包管理工具的 npm 已经成为每个前端开发者必备的工具。但是现实状况是,我们很多人对这个nodejs基础设施的使用和了解还停留在: 会用 npm install 这里(一言不合就删除整个 node_modules 目录然后重新 install 这种事你没做过吗?) 当然 npm 能成为现在世界上最大规模的包管理系统,很大程度上确实归功于它足够用户友好,你看即使我只会执行 inst
Techeek
2018/03/26
6.7K7
相关推荐
npm
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验