认识node.js与npm及yarn(二)

一、node.js

具体项目见微服务前端demo。(gitbook下载markdown文件为pdf也用到了node.js与yarn。参看链接:https://www.cnblogs.com/zhangshuaivole/p/12498528.html)

node.js学习看菜鸟教程。

Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。

1.1 nodejs类比Java中:JVM

 详述:

就前端来说nodejs具有划时代的意义,做前端的没用过nodejs都不好意思说自己是前端,

做后端的没听过nodejs,或者说不出nodejs和java的优缺点,也不是一个合格的后端。

nodejs不是一个js框架,千万不要认为是类似jquery的框架,nodejs是js运行时,运行环境,类比java中jvm,java的开端是什么,无疑是jvm,自从有了jvm,java才能吹牛说自己是“一次编写处处运行”,不管你是windows还是linux,只要安装了对应版本的jvm都可以运行.class文件。

同样nodejs的作用和jvm的一样一样的,也是js的运行环境,不管是你是什么操作系统,只要安装对应版本的nodejs,那你就可以用js来开发后台程序。

这具有划时代的意义,意味着一直以来只能在浏览器上玩来玩去的js,可以做后端开发了,

从有了nodejs后就催生出一大批用js做后台开发的前端人员,这部分人员就是偏前端的“全栈程序员”。

记住,nodejs是和jvm同等地位的js运行环境,打开了前端人员走向后端的道路。

1.2 js mvc框架

相关框架:

框架太多,详见下面两篇文章

私人定制,十款最佳Node.js MVC框架

基于NodeJS的14款Web框架

类比Java中的:

ssh1(struts1+spring+hibernate),ssh2(struts2+spring+hibernate),ssm(springmvc+spring+mybatis)

详述:

上面说到nodejs打开了前端开发人员开发后端的大门,而且nodejs类比jvm,

那么学习java的人都知道,学习完jvm(基础)后该学什么了?

对,框架,

java中有哪些框架,正如上面所说,ssh1,ssh2,ssm等等,这些框架都mvc框架。

既然nodej都有了,jvm出现了,那接下来就是js大神开始封装mvc框架,正如java大神开始封装mvc框架一样,

相对java流行了几种框架,nodejs对应的mvc框架就多的多了,

详见上面两篇文章,足够让你看的眼花缭乱。

其中比较有名的是expressjs。

记住,当你看到这些js框架的时候,微微一笑,原来就是写mvc框架,基于nodejs:

Sails. js,Total.js,Partial.js,Koa. js,Locomotive. js,Express. js,Flatiron. js

 1.3 js模块化

相关概念:

commonjs,amd,cmd,umd

相关框架:

commonjs,seajs,requirejs,coolie

类比Java中的:

import,对就是import。。

详述:

如上所说,当有了nodejs(jvm),有了mvcjs(ssh)之后,

可想而知,每个mvcjs中会有多少js文件,这个时候js模块化就派上用处了,

当有人和你说js模块化如何如何,感觉自己很吊的时候,甩他一句,不就是java中的import吗?

对,虽然在前端看来js模块化如何牛x,如何吊,但是就java来说就是import。

 

但是js中的模块化,还有很多规范,比如commonjs,amd,cmd,umd,感觉头大了吧,其实简单的来说,就是commonjs是运行在nodejs端,amd,cmd,umd是运行在浏览器,其作用就是import各种js文件,把js模块化管理,可以理解为java中的包管理,详见这篇文章:http://coolie.ydr.me/introduction/commonjs-amd-cmd-umd.html 

同样,一个mvc,js能做出来10+种框架,可想而知模块化,js也对应很多框架,例如commonjs,requirejs,seajs等等。

 参看自链接:https://blog.csdn.net/mykurt/article/details/79914078

二、npm的由来及与node.js的关系

网上的 npm 教程主要都在讲怎么安装、配置和使用 npm,却不告诉新人「为什么要使用 npm」。今天我就来讲讲这个话题。

本文目标读者是「不太了解 npm 的新人」,大神您别看了,不然又说我啰嗦了 😂。

社区

程序员自古以来就有社区文化:

社区的意思是:拥有共同职业或兴趣的人们,自发组织在一起,通过分享信息和资源进行合作。虚拟社区的参与者经常会在线讨论相关话题,或访问某些网站。

前端程序员也有社区,世界上最大的前端社区应该就是 GitHub 了。前端通过 GitHub 来

  1. 分享源代码(线上代码仓库)
  2. 讨论问题(Issue 列表)
  3. 收集学习资源和常去的网站(比如我收集的优质中文前端博客

加入社区最大的好处之一是,你可以使用别人贡献的代码,你也可以贡献代码给别人用。

共享代码

前端是怎么共享代码的呢?

在 GitHub 还没有兴起的年代,前端是通过网址来共享代码

比如你想使用 jQuery,那么你点击 jQuery 网站上提供的链接就可以下载 jQuery,放到自己的网站上使用

GItHub 兴起之后,社区中也有人使用 GitHub 的下载功能:

麻烦

当一个网站依赖的代码越来越多,程序员发现这是一件很麻烦的事情:

  1. 去 jQuery 官网下载 jQuery
  2. 去 BootStrap 官网下载 BootStrap
  3. 去 Underscore 官网下载 Underscore
  4. ……

有些程序员就受不鸟了,一个拥有三大美德的程序员 Isaac Z. Schlueter (以下简称 Isaaz)给出一个解决方案:用一个工具把这些代码集中到一起来管理吧!

这个工具就是他用 JavaScript (运行在 Node.js 上)写的 npm,全称是 Node Package Manager

具体步骤

NPM 的思路大概是这样的:

1. 买个服务器作为代码仓库(registry),在里面放所有需要被共享的代码

2. 发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上,分别取名 jquery、bootstrap 和 underscore(注意大小写)

3. 社区里的其他人如果想使用这些代码,就把 jquery、bootstrap 和 underscore 写到 package.json 里,然后运行 npm install ,npm 就会帮他们下载代码

4. 下载完的代码出现在 node_modules 目录里,可以随意使用了。

这些可以被使用的代码被叫做「包」(package),这就是 NPM 名字的由来:Node Package(包) Manager(管理器)。

发展

Isaaz 通知 jQuery 作者 John Resig,他会答应吗?这事儿不一定啊,对不对。

只有社区里的人都觉得 「npm 是个宝」的时候,John Resig 才会考虑使用 npm。

那么 npm 是怎么火的呢?

npm 的发展是跟 Node.js 的发展相辅相成的。

Node.js 是由一个在德国工作的美国程序员 Ryan Dahl 写的。他写了 Node.js,但是 Node.js 缺少一个包管理器,于是他和 npm 的作者一拍即合、抱团取暖,最终 Node.js 内置了 npm。

后来的事情大家都知道,Node.js 火了。

随着 Node.js 的火爆,大家开始用 npm 来共享 JS 代码了,于是 jQuery 作者也将 jQuery 发布到 npm 了。

所以现在,你可以使用 npm install jquery 来下载 jQuery 代码。

现在用 npm 来分享代码已经成了前端的标配。

后续

Node.js 目前由 Ryan Dahl 当时所在的公司 joyent 继续开发。Ryan Dahl 现在已经去研究 AI 和机器学习了,并且他把 Node.js 的维护权交给了 Isaaz。(我是不是也应该去研究 AI 和机器学习啊教练)

而 Isaaz 维护了一段时间后,辞职了,成立了一个公司专门维护 npm 的 registry,公司名叫做 npm 股份有限公司……谁说开源不能赚钱的~

社区的力量

回顾前端的发展是你会发现,都是社区里的某个人,发布了一份代码,最终影响前端几年的走向。比如 jQuery,比如 Node.js,比如 npm。(其实其他语言也是这样的)

所以,社区的力量是巨大的。

原文链接:https://zhuanlan.zhihu.com/p/24357770

三、yarn

yarn是一个包管理工具,用来替代npm。

yarn有以下3个优点 :

安装速度快 (服务器速度快 , 并且是并行下载)
版本锁定
缓存机制。
Yarn语法

npm init                                              ---- yarn init
npm install                                         ---- yarn 
npm install xxx@1.1.1 -g                   ---- yarn global add xxx@1.1.1
npm install xxx@1.1.1 --save            ---- yarn add xxx@1.1.1
npm install xxx@1.1.1 --save-dev     ---- yarn add xxx@1.1.1 --dev
npm uninstall xxx --save(-dev)          ----yarn remove xxx
npm run xxx                                      ---- yarn run xxxx

安装方式:

 npm install yarn -g

官网: https://yarn.bootcss.com/

以下内容请参考原文:https://blog.csdn.net/qiansg123/article/details/80129453
npm是Node.js能够如此成功的主要原因之一。npm团队做了很多的工作,以确保npm保持向后兼容,并在不同的环境中保持一致。

npm是围绕着语义版本控制(semver)的思想而设计的。

参看链接:https://blog.csdn.net/qq_27674439/article/details/93976115

四、npm与yarn的区别

参看链接:https://blog.csdn.net/qq_27674439/article/details/93976115

五、VUE

参看链接:https://www.cnblogs.com/lishanlei/p/8423407.html

六、node.js与vue.js的区别

6.1 node.js

什么是node.js

node.js不是一门语言,不是库,不是框架,只是一个javeScript运行时环境。简单的就是node.js可以解析和执行javeScript代码,以前只有浏览器可以解析执行JaveScript代码,现到的javeScript可以完全脱离浏览器来运行,一切都归功于node.js。

nodejs构建于Chrome的V8引擎[目前解析执行JaveScript最快]之上:代码只是具有特定格式的字符串而已,引擎可以解析和运行代码。

node.js中的javeScript没有Bom,Dom(dom:DOM是网页中用来表示文档中对象的标准模型,通过JavaScript可以对网页中的所有DOM对象进行操作,是由万维网联盟W3C组织制定的标准编程接口。文档对象模型(Document Object Model,简称DOM)。

在node这个javeScript执行环境中为javeScript提供了一些服务器基本的操作:比如文件读写,网络服务的构建,网络通信,http服务器等处理

node.js特性:

事件驱动,非阻塞IO模型[异步],而且轻量和高效。

使用包管理器npm,npm是世界上最大的开源库生态系统,绝大多数JaceScript相关的包都存放了npm上。

node.js能做什么

Web服务器后台

命令行工具[比如可以开发npm,git,hexo]

对于前端开发,阶乘node最多的是他的命令行工具

nodjs安装[windows]

打开命令行:node --version

如果有版本号出现,说明已经安装了

官网:https://nodejs.org/en/ 下载对应版本进行安装,如果已经安装了,不卸载的话会对原本的进行覆盖[注意安装目录]

直接傻瓜式下一步就可以了

6.2 vue.js

什么是vue.js

vue.js是最火的前端框架,react是最流行的前端框架[React除了开发网站、手机app。Vue可以借助wee进行手机app]。

vue.js是一套构建用户界面的框架,只关注视图层,Vue有配套的第三方类库,可以整合起来做大型项目的开发。

前端负责MVC中的V[前端页面]这一层。

Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!

为什么需要vue.js

提高开发效率的发展历程:原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js(能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念【通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染的了】)

在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑。

参看自链接:

https://blog.csdn.net/zhizhengguan/article/details/83381453

https://www.cnblogs.com/masterhxh/p/12655007.html

posted @ 2020-06-04 17:37  慎终若始  阅读(29)  评论(0编辑  收藏  举报