前端十万个为什么(之一):我们为什么需要npm?

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }

如果我能比别人看得更远,那是因为我站在巨人的肩上。

                    ——艾萨克·牛顿

现代前端开发已经离不开Node了。大家都知道在安装Node时会附赠一个命令行工具Node Package Manager,即npm。或许你已经照着教程输入过好多遍”npm install xxx”,并且你发现npm的命令林林总总几十条,package.json的配置项令人眼花缭乱,但不知你有没有认真想过,我们为什么需要npm?如果没有它,世界会怎样?

我的理解,npm所做的一切都是为了解决软件工程界一个一直以来的追求:代码复用。抓住这个核心,也就抓住了正确理解和使用npm的钥匙。

为什么要复用代码呢?因为基于已有的成熟代码快速开发新的应用,可以极大地提高开发效率,正所谓“站在巨人肩膀上”“不要重复造轮子”。

So,在Node环境下要复用JS代码,我们有哪些方案呢?

1. 刀耕火种——copy&paste
复制粘贴代码的思路很直接,但如今还在的这样搞的同学应该是从原始社会穿越来的吧。。这个方案最大的缺点倒还不是代码冗余,而是一旦所复制的原始代码发生了变化,那就必须手动修改每一处复本,在稍有规模的项目里根本不可行。

2. 耕牛犁地——CommonJS

Node实现了一个模块系统CommonJS,实在是JSer的一大福音。借助它,我们不必再复制粘贴代码了:假如一个作者开发了一个名为lib1的库,他只需代码写在一个名叫lib1.js的文件里,用module.export语句导出;而使用者只需把lib1.js下载到自己工程目录,require一下便可直接用啦!(此时lib1也被称为一个“依赖”)

但这里仍然存在两个大问题:

一,如果lib1.js本身也复用了别的代码,比如lib2.js、lib3.js...那你在下载lib1.js的时候,必须手动把它所依赖的这些模块文件也一并下载;可要是lib2.js还依赖lib5.js、lib6.js....呢?一棵庞大的、深不见底的依赖树很难手工管理。

二、lib1.js的作者修复了几个bug,但没有一个机制能让他通知你升级旧的模块文件。

作为一名职业素养良好的程序员,看到这些问题的第一反应是不是“写个脚本”?哈哈,不用麻烦了,因为已经有人替我们写好了,这个脚本工具就是npm。

3. 机械化耕作——npm
有了上面“自力更生”的原始体验,再看看npm提供的依赖安装、卸载、升级、发布等一条龙服务,是不是很爽?

Npm制定了一个包规范,所谓规范就是一些格式和约定,比如约定从package.json文件里读取这个包的所有信息,包括它的名字、版本号、它依赖于哪些别的包等;又比如约定node_modules目录专门用来存放第三方依赖,Node为此提供的支持是内置的require方法默认会到这个目录下去检索模块,而无需手动指定路径。有了这些规范,一个包的开发、依赖安装、发布等都步骤都标准化了,省心省力。

可以说,JavaScript从一门“玩具”语言,到如今可以胜任大型项目开发,模块化和npm是其进化路上的重要一步。

后记

大家都知道前端有“三板斧”,但刚才我一直在谈JS,完全没提到另外两板斧。这是因为npm只是“Node模块管理器”,Node上又没有HTML和CSS,npm自然管不到。那么除了可以直接支持Node端的开发以外,npm又如何为浏览器端开发提供支持呢?

答案是:npm生态圈提供了很多强大的前端开发工具,比如Webpack、Babel、ESLint等。特别是Webpack、Browserify、rollup这类构建工具,可以接手浏览器端的依赖管理重任,以及很多其他的附加功能。这些内容,且待下回分解。。

时间: 2024-10-31 02:13:27

前端十万个为什么(之一):我们为什么需要npm?的相关文章

前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、Git/SVN)

一. 各类概念和指令介绍 1. NVM (1).  全称:Node Version Manager,是一款针对Nodejs的版本管理工具,由于Node的版本很多,很多时候我要需要依赖多个版本,并且要求可以自动切换,这个时候采用NVM来管理Node再合适不过了. (2). 下载地址:https://github.com/coreybutler/nvm-windows/releases (3). 常用指令: a. 查看已经安装的node版本:    [nvm list] b. 更换当前node的版本

学写网站(一)前端配置之安装nvm、node、npm

一.安装nvm node version manager 是一个用来管理node版本的工具.使用node主要是要使用npm,能够方便的管理一些前端开发的包. nvm安装过程(windows): 1.下载 2.点击直接安装 3.配置: ①将nvm的路径添加到环境变量之中. ②打开cmd,然后输入nvm,如果没有提示找不到命令,说明已经安装成功. 4.常用命令 ①nvm install node :安装最新版本的node.js.nvm i = nvm install ②nvm install [ve

Web 前端开发环境

创建 Web 前端开发环境 Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. 1. 安装 NodeJS 和 NPM 一切从 NodeJS 开始吧,官方网址:https://nodejs.org/ NodeJS 既可以为我们提供一个服务器端的 Web 环境,又可以提供一个命令行的工具,既然做 Web 前端开发,那就是我们必然选择的工具了. 为了解决

如何成长为一名优秀的前端工程师

小A和小B都是应届毕业生,一起进入了一家互联网公司做前端.半年过去了,小A进步神速,他写的JavaScript代码在组里挑剔的的老员工看来都挺不错:可读性好,模块化程度高,而且有大量的测试.反观小B,他的代码总是一团糟,还经常搞出莫名其妙的bug.每次做code review时,大家对小B的代码都特别头疼. 年底考核的时候,组长让小A分享一下他入职以来是怎么学习前端并快速成长的,小A不好意思地给大家分享了自己的一点学习心得: 首先,前端工程师必须得熟练掌握HTML.CSS和JavaScript.

创建 Web 前端开发环境

Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. 1. 安装 NodeJS 和 NPM 一切从 NodeJS 开始吧,官方网址:https://nodejs.org/ NodeJS 既可以为我们提供一个服务器端的 Web 环境,又可以提供一个命令行的工具,既然做 Web 前端开发,那就是我们必然选择的工具了. 为了解决包管理的问题,NodeJS

前端开发工具集 eutils

项目介绍 该项目整理了前端比较常用的工具集,包括js工具和css工具:当我们新建一个前端项目时,只需要引入这个npm包,就可以省去很多写工具的重复工作: 源码地址 API version collection 项目规范 函数使用小驼峰方式命名 对象使用大驼峰方式命名 项目使用webpack构建,支持按需引入 支持直接引入编译前的源文件:less文件.es6文件 安装 $ npm install @jnlong/eutils 使用 js // js引用方法1 import eutils from

web前端入门到实战:把HTML转成PDF的4个方案及实现

在本文中,我将展示如何使用 Node.js.Puppeteer.headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档. 背景:几个月前,一个客户要求我们开发一个功能,用户可以得到 PDF 格式的 React 页面内容.该页面基本上是患者病例的报告和数据可视化结果,其中包含许多 SVG.另外还有一些特殊的请求来操纵布局,并对 HTML 元素进行一些重新排列.因此与原始的 React 页面相比,PDF 中应该有不同的样式和额外的内容. 由于这个任务比用简

Asp.Net MVC EF各版本区别

2009年發行ASP.NET MVC 1.0版 2010年發行ASP.NET MVC 2.0版,VS2010 2011年發行ASP.NET MVC 3.0版+EF4,需要.Net4.0支持,VS2011 2012年發行ASP.NET MVC 4.0版+EF5,需要.Net4.0支持,VS2012 2013年發行ASP.NET MVC 5.0版+EF6,需要.Net4.5支持,VS2013 2015年發行ASP.NET MVC 6.0版+EF7,需要.Net5.0支持,VS2015 ASP.NET

ASP.NET 5简介

ASP.NET 5简介 解读ASP.NET 5 & MVC6系列(1):ASP.NET 5简介 2015-05-13 09:14 by 汤姆大叔, 3379 阅读, 39 评论, 收藏, 编辑 ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一个.NET Core的东西. 在.NET Core里一切都是可配置的,包括Session.MVC等功能,而