代码改变世界

javascript, es6, nodejs, commonJS的区别和联系

2022-07-08 23:13  cyhcyh  阅读(529)  评论(0)  编辑  收藏  举报

这几个概念如果没有仔细读相应的教程或者文档，很容易混淆。下面是根据我的浅表理解和网络参考整理的文档，不一定准确，有误请指出轻喷
本文条理：

  • 这四者的关系
  • Node.js 的出现要解决什么问题？
  • Node.js（V8）和ES6的关系
  • Babel的作用
    题外知识点：
  • 什么是runtime?
  • 浏览器解析和执行javascript用javascript引擎,那HTML呢？
    ==============================================
    分门别类：
    |语言标准|语言|javascript runtime|模块生态系统项目|
    |----------|---------|----------|---------|
    |ECMAScript6|javascript|Node.js|CommonJS|

看完上面的归类后，就会发现实际上你在写的就是javascript

  • ES6，是javascript语言规范，用于规范javascript， 也就是定义javascript语法标准。
  • Node.js 是javascript运行时环境（javascript runtime）,主要作用就是可以让javascript脱离浏览器执行。
  • commonJS是一个在2014年已经被终止的项目，它的规范让javascript可以实现模块化。Node.js最开始就只支持commonJS的模块化标准，即 require/exports， 后来ES6改进了模块化标准为用 import/export， 相对前者有更多灵活的用法。
    所以为了让javascript更好的被使用，这三者才会出现， 当然实现ES6标准的不止javascript,还有其他语言，如JScript，ActionScript等脚本语言都是基于ECMAScript标准实现的。

现在来说说Node.js 和javascript的关系，以及为什么会有Node.js这么个东西出现？
很多人弄不清楚Node.js到底是不是javascript？
--不是。
--javascript是语言，Node.js是javavscript的运行时。
Node.js= chrome浏览器的V8引擎+一些javascript运行时库。

javascript诞生之初的目的是用在web， 由浏览器执行。那么脱离浏览器，javascript就不能执行了吗？ nodejs出现之前，确实是这样的。因为只有浏览器里才有javascript解释器！只有它才知道javascript要怎么执行。既然如此，只要把这个解释器拿出来，再添加一些必要的执行库工具不就可以让javascript脱离浏览器执行了嘛，所以nodejs就诞生了。各家浏览器商都有自己的javascript解释器， nodejs用的是chrome的V8 javascript引擎。这个问题就解释完了。

接下来说说Node.js和ES6的关系
我的理解是：Node.js用V8引擎，而V8如果能解析ES6规范的javascript语法，那么Node.js也就能支持相应的语法标准。

ECMA每发布一个标准，各大浏览器的javascript引擎都会尽量跟上，它们现在大部分都支持了ES5，ES6 还没有被完全支持。而V8对ES6已经高度支持了，也就是说Node.js对ES6也高度支持。

接下来说Babel的作用
babel是用于将ES6转成ES5的工具， 因为目前很多浏览器尚未完全支持ES6。
而babel官方对自己的解释是JavaScript compiler：

Babel is a JavaScript compiler.

babel提供在线转码工具，可以在左边编写ES6的代码，右边可以看到转码后的ES5代码，最直观的测试可以用import vs require, 或者箭头函数=>.
如何使用babel
babel在项目中的作用是通过项目根目录下编写.babelrc 文件，配置babel转码规则和所使用的插件来完成。

同时，babel还提供了 babel-node 用于替代命令node以编译执行尚未被Node.js(或者说V8)支持的代码，比如import:

//exportFile.js
export function exfile(){
    console.log("I am an exported file");
}
//importFile.js
import {exfile} from './exportFile';
exfile()
//终端执行，npx是nodejs用于执行当前项目的node_modules/.bin下的命令的快捷命令 #the npm package runner that comes with npm@5.2.0
$ npx babel-node importFile.js 
I am an exported file

如果你在这里用node命令运行importFile.js的话，由于import命令还未被V8支持，你会得到下面的错误信息：

$ node importFile.js
C:\...\src\js\importFile.js:1
import {exfile} from './exportFile';
       ^

SyntaxError: Unexpected token {

babel提供了很多插件用于支持javavscript转码，详细请参考文档
https://babeljs.io/docs/en/

========================================
题外知识点：
什么是runtime?
虽然我在前文放了个连接到stackoverflow上回答# What is “runtime”?
但是在这里我还是想写下我的理解：
runtime正如其名：你的代码要运行起来所需要的东西，比如依赖的代码库，已经被工具编写好的底层指令，承载你代码的框架，可以让你的代码运行起来的平台，其实这些概念都有点重复，比如
可以让你的代码运行起来的平台自然包括它已经为你写好的底层交接指令，框架也是，最简单的例子就是通信模块，各大框架都已经为你封装了HTTP请求的“发”，“收”的复杂处理， 你只需要写业务代码就可以。
这样一来就可以理解Node.js的自我介绍：

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine

上面是我个人理解，下面贴上stackoverflow的答案：
高赞答案：

Runtime describes software/instructions that are executed while your program is running, especially those instructions that you did not write explicitly, but are necessary for the proper execution of your code.
//Runtime指的是在你的程序运行时被执行的软件或者指令，特别是那些你没有明确写出来的指令，但是确实是你代码执行所必须的指令。
d
Low-level languages like C have very small (if any) runtime. More complex languages like Objective-C, which allows for dynamic message passing, have a much more extensive runtime.
d
You are correct that runtime code is library code, but library code is a more general term, describing the code produced by any library. Runtime code is specifically the code required to implement the features of the language itself.

次高赞答案：

Runtime is a general term that refers to any library, framework, or platform that your code runs on.
d
The C and C++ runtimes are collections of functions.
// 运行时是一个通用术语，指的是您的代码在其上运行的任何库，框架或平台。C和C ++运行时是函数的集合。
d
The .NET runtime contains an intermediate language interpreter, a garbage collector, and more.

接下来说浏览器解析和执行javascript用javascript引擎,那HTML呢？
这是一篇很棒的文章，值得一读
浏览器的工作原理
我摘抄了这段，用于理解浏览器的结构，其中的呈现引擎就是用于解析HTML和CSS，并显示他们：

浏览器的高层结构
浏览器的主要组件为 ([1.1(https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#1_1))：
d1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
d2. 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
d3. 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
d4. 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
d5. 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
d6. JavaScript 解释器。用于解析和执行 JavaScript 代码。
d7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

======额外参考======

  • 运行下面命令可以查看你当前使用的node已经实现的ES6特性：
    来自阮一峰 
// Linux & Mac
$ node --v8-options | grep harmony

// Windows
$ node --v8-options | findstr harmony


作者：V_Jan
链接：https://www.jianshu.com/p/7a5201690fb4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。