🦄 2024 独立开发者训练营,一起创业!(早鸟优惠在6天后结束)查看介绍 / 立即报名 →

Node.js 服务端应用开发 #1:准备开发工具与开发环境

带上基本的开发工具,配置好应用在本地的开发环境,我们就可以启动此次开发之旅了。

命令行界面

在开发工作中,有相当多的任务要在命令行界面下面完成,就是要通过输入一些文字命令来完成一些事情。比如远程连接管理服务器,创建或者启动应用,做源代码管理等等,执行这些文字命令的地方叫命令行界面。命令行是每一位开发者必备的工具,要尽早熟悉这种工作方式。

命令行界面是执行命令的地方,命令行工具指的是在命令行界面下可以做的一些事情,它们是一些没有图形化界面的小程序。你要使用操作系统提供的服务,要么可以通过图形化界面,要么就是通过命令行界面,无论是图形化界面还是命令行界面,它们都是一种用户界面,也就是用户可以通过这个界面完成一些事情,这个用户界面还有个名字叫 Shell(壳)。

比如我们要打开一个目录,查看目录里的东西。在图形化界面里,完成这个任务就是用鼠标双击打开这个目录,这样就会在图形化界面上显示这个目录里的东西。在命令行界面下完成这个任何要执行对应的命令,比如先要用 cd 这个命令进入到想要查看的目录,然后用 ls 命令列出这个目录里的资源。

看到陌生的东西我们一开始总是会有点抵触,这是因为我们已经习惯了使用带图形化界面的软件,开始会很难适应在命令行界面下工作。但是不管你喜不喜欢,命令行工具是开发者不能避开的,因为不是所有的软件都提供图形化界面。有些任务在命令行下面去做可能会更合理,也更有效率。因为逃不掉,所以也就没有必要抵触它,慢慢的你可能还会爱上它。

在不同的操作系统里面都提供各自的命令行界面。比如在 Windows 系统上有个 cmd,还有一个 PowerShell。 相比 Linux 或者 macOS 系统,Windows 系统里面少了很多命令行工具,所以我们可以额外安装一个更好用的命令行界面,推荐使用 Cmder。在 macOS 系统上,提供了一个命令行界面,叫 终端 。为了方便,以后我们统一管这种输入文字命令的地方,也就是命令行界面叫 “终端”。

如果你看到我说 “打开终端” 或者 “在终端”,对于 Windows 用户来说指的就是 Cmder,对于 macOS 用户,指的是系统自带的 终端。

任务<Windows>:准备命令行界面<Cmder>

如果你的电脑用的是 Windows 操作系统,现在可以下载一个完整版的 Cmder,后面我们会用它作为命令行界面。当你听到我说 打开终端,或者 在终端,你要做的就是打开这个 Cmder,新建一个 bash as Admin 类型的命令行标签。

1:下载完整版 Cmder

到 Cmder 的官方网站去下载一个完整版的 Cmder。它提供了两个版本,Mini(迷你) 与 Full(完整)。我们需要的是完整版的 Cmder,因为它里面包含了大量的小工具,后面我们会用到一些。

2:解开压缩包

下载下来的东西应该是个压缩包,解压这个压缩包可以得到一个叫 cmder 的目录。这个目录里的 Cmder.exe 就是我们需要用的命令行界面。

3:转移 cmder 目录

把解压之后得到的 cmder 目录转移到 C:\Program Files 这个目录里面。

4:创建快捷方式

为了以后方便使用,可以在桌面上创建一个 Cmder 的快捷方式。 打开 cmder 目录,里面会有一个 Cmder.exe,在 Windows 系统里 .exe 后缀的东西是可以执行的程序。如果你看不到文件的后缀,是因为系统配置的问题,别太在乎。按住鼠标右键,把 Cmder.exe 拖动到桌面上,松开鼠标会出现一个菜单,选择创建快捷方式,以后可以通过这个快捷方式打开这个 Cmder.exe

5:以管理员身份运行 Cmder

使用 Cmder 的时候要注意,有些工具或者任务需要系统的管理员权限。所以打开 Cmder 的时候,可以用鼠标右键点击 Cmder 小图标(快捷方式或 Cmder.exe),然后选择 以管理员身份运行

6:创建 bash as Admin 命令行标签

默认打开 Cmder 的时候会自动创建一个 cmd 类型的命令行界面,在这种命令行界面上执行任务,跟直接使用 Windows 系统自带的命令行工具差不多。我们需要的是一个 Bash 类型的命令行界面。在后面所有需要在命令行下面执行的任务,你都需要在这种 Bash 类型的命令行界面下完成。

打开 Cmder 以后,点击右下角的绿色加号小图标来创建一个新的命令行标签,在 Startup command 下拉菜单里面,选择 bash::bash as Admin,然后点击窗口右下角的 Start 按钮。这样你就可以在这个命令行界面下,使用很多额外的小工具了,用法跟 Linux 或者 macOS 系统也非常接近。

观察 Cmder 底部的状态栏,会出现两个命令行标签,一个是 cmd.exe,这是默认创建的一个标签,还有一个是 bash.exe,这是我们自己创建的一个命令行界面。在执行命令的时候,我们要在这个 bash.exe 标签上完成。

任务<macOS>:准备命令行界面<Terminal>

终端(Terminal),是 macOS 系统里自带的一个命令行界面,你可以在 启动台 里面找到 终端,然后打开它,或者使用 聚焦搜索,搜索 Terminal 或者 终端 都可以找到这个工具。

任务:熟悉基本的命令

打开终端,下面要熟悉一些基本的命令行工具,比如知道自己当前位置在哪里,里面都有什么,要去哪里。

1:输出当前所在的位置

pwd

pwd 这个命令(工具)的意思是 Print Working Directory,执行 pwd ,得到的结果是个路径,通过这个路径我们就可以知道自己当前所在的位置,这个位置其实就是系统里的某个目录。

在路径里面,目录之间会用斜线分隔开,/ 是斜线,Linux 与 macOS 系统都会使用这种斜线,而 Windows 系统里,默认用的是反斜线,也就是 \ 。因为我们在 Windows 系统上下载安装了一个 Cmder,并且新建了一个 Bash 类型的命令行标签,所以表示路径用的斜线也是 / 。

2:列出目录里的资源

ls

ls,可以想成是 List 这个单词的简称。这个工具的作用就是列出当前目录或者指定位置里面都有什么东西(文件或目录)。在这个命令的后面你可以输入一个目录的位置,这样执行这个命令就会列出指定位置里的东西了。

3:理解命令行工具的选项

ls -la

这里同样使用的是 List 命令,只不过添加了两个额外的选项。在命令行界面里使用的这些工具,就是通过这样的方式来扩展它们的功能。命令的选项一般都会放在 - (小横线)的后面,这里我们选择使用了 ls 命令提供的两个选项,一个是 -l 选项,表示要用长格式显示列出的内容。

在 ls 命令的后面还用了一个 -a 选项,表示要列出所有的东西,包括隐藏的资源,在 Linux 与 macOS 系统里,用 . 开头的文件或者目录默认都会被隐藏起来。所以想在资源列表里,包含这些隐藏的东西,就需要在 ls 命令的后面,使用 -a 这个选项。

4:进入到某个目录里面

cd ~/desktop

进入到用户主目录下面的 desktop 这个目录里面,这个目录里的东西默认会出现在你的电脑桌面上。 cd 指的是 Change Directory,这个工具可以改变当前的位置,也可以说进入到某个目录的下面,或者说把当前的工作目录(Working Directory)换成某个目录。

在这个 cd 命令后面跟着一个你要进入的地方, ~(波浪号)指的位置就是用户的主目录。这里说的用户指的就是你登录电脑的时候用的那个用户。比如我是用 wanghao 这个用户登录的,所以在我的终端,这个 ~ 符号,指的位置是 /Users/wanghao。 ~/desktop 指的位置就是 /Users/wanghao/desktop

5:回到上一级目录

cd ../

../两个点加一条斜线)表示的是上一级目录,比如对于 /Users/wanghao/desktop 这个目录来说,它的上一级目录就是 /Users/wanghao../../ 表示的是上一级目录的上一级目录。 ./ 一个点加一条斜线表示的是当前目录。

理解环境变量目录

在命令行界面,执行的命令其实都是一些小程序,这些小程序没有图形界面,所以我们只能在命令行界面下使用它们。这些小程序要在特定的位置才能在命令行界面下,直接通过它们的名字使用它们,不然我们在使用它们的时候,要输入这个小程序的完整的路径才行,这些特殊的位置叫环境变量目录。

Windows 用户可以打开 Cmder,新建一个 bash 类型的命令行界面,macOS 用户打开终端,然后执行一下:

echo $PATH

执行上面这行命令,得到的就是系统里的环境变量目录的列表,你会发现有很多,它们中间会用冒号分隔开。我们也可以通过配置,添加自己需要的环境变量目录。echo 这个命令可以输出东西,这里要输出的是 $PATH 这个东西,它是一个变量,变量的值是一些环境变量目录。

如果把一个命令行工具放在这些环境变量目录里面,我们就可以直接在命令行界面下,输入它们的名字执行这些命令。不然的话使用这些命令行工具要进入到这个工具所在的目录,或者输入命令工具的完整的路径。假设我们自己创建了一个命令行工具,文件的名字是 greet ,如果这个命令行工具文件是在 /Users/wanghao/desktop 这个目录里面,在命令行界面里执行这个命令行工具的时候,要像这样:

/Users/wanghao/desktop/greet

因为 /Users/wanghao/desktop 这个目录并不是环境变量目录,除非我们通过配置,让它作为一个环境变量目录,不然我们在使用这个目录下面的命令行工具的时候,就需要输入这个工具的完整的路径。

如果我把这个命令行工具,放在 /usr/bin 这个目录的下面,要在命令行界面里使用 greet 这个命令的时候,可以直接输入 greet 就行了。因为 /usr/bin 这个目录是一个环境变量目录。

知道命令来自哪里

如果你想知道一个命令行工具到底在哪儿,可以用 which 命令,比如我想知道 ls 这个命令行工具的位置,可以执行:

which ls

得到的结果就是 ls 这个命令行工具的位置,具体在哪取决于你的操作系统。在 macOS 系统里,这个工具是在 /bin/ls 。在 Windows 系统里,如果你用的是 bash 类型的 Cmder,会显示这个工具的位置是 /usr/bin/ls 。usr 一般表示的是 user,也就是用户的意思,bin 这个目录里通常包含的是一些可以执行的程序。

这个 /usr/bin 应该是 Cmder 设置的一个目录的别名,因为在 Windows 系统里并没有这个地方,实际的位置应该是 Cmder 里的某个目录的下面。在我的系统里,/usr/bin 真正的位置是 /C/Program\ Files/cmder/vendor/git-for-windows/usr/bin ,进入到这个目录的下面,列出目录里的资源,你会发现一些 .exe 后缀的文件。

在 Windows 系统里,带这种 .exe 后缀的文件就是可执行的程序。在后面我们会用到这里面的一些命令行工具,比如远程连接服务器用的 ssh ,生成密钥文件用的 ssh-keygen 等等。Windows 系统默认都不带这些东西,这也是我们为什么要用 cmder 来代替 Windows 系统自带的命令行界面。

命令行工具的帮助信息

如果你了解某个命令行工具的用法,可以在命令的后面加上 --help 选项,比如:

ls --help

如果命令不提供 --help 这个选项,可以试着用 man 命令查看命令的使用说明,比如:

man ls

命令的说明文档可能会分页显示,按 f 键可以向后翻页,按 b 键可以向前翻页,按 q 键可以退出文档。

命令行界面的配置文件<macOS>

通过一个配置文件可以配置命令行界面,比如设置命令的别名,添加新的环境变量等等。这个配置文件一般会放在用户主目录的下面,配置文件的名字也是有要求的,具体是什么要看我们的命令行界面使用的是哪种 Shell,一般是 bash 或者 zsh。macOS 系统以前用的是 bash 这种命令行界面,不过从 Catalina 版本的 macOS 开始,换成了 zsh。

我们先简单了解一下命令行界面的配置文件,主要就是知道这个配置文件在哪里。先打开系统的终端,然后观察一下窗口标题栏上的文字,应该会有你的用户名,用户名的后面还会出现命令行界面当前使用的 Shell 是谁,比如可能是 bash 或者 zsh。如果是 bash,你要在用户主目录的下面,创建一个 .bashrc 或者 .bash_profile,它们都是 bash 的配置文件。如果是 zsh,你要在用户主目录的下面,创建 .zshrc 或者 .zprofile,这是 zsh 的配置文件。

从 Catalina 这个版本的 macOS 开始推荐使用 zsh,如果不是,打开终端会提示你执行一条命令把 Shell 从 bash 切换到 zsh。确定了你用的是 zsh 以后,我们可以给它创建一个配置文件,然后修改一下命令提示符。默认的命令提示符像这样:

wanghao@wanghaodeMacBook ~ %

里面包含了用户名,电脑的名字,还有当前所在的目录的名字。我希望简化一下这个命令提示符,只需要一个 → 。

先创建一个 zsh 的配置文件,执行:

vi ~/.zshrc

vi 是一个在命令行界面下使用的文本编辑器,它后面是要编辑的文件的位置,如果文件不存在就会新创建一个。打开以后,先按一下小写的 i 按键,这会打开编辑器的编辑模式,这样就可以编辑文件内容了,输入:

PROMPT = '→ ';

上面这行配置的就是命令提示符,完成了编辑可以按一下 esc 退出编辑器的编辑模式,再输入 :wq,意思是保存并且退出文件,注意输入这些命令时要在英文状态下。关掉终端,重新再打开它,或者执行一下 srouce ~/.zshrc。你会发现命令提示符就会是我们修改之后的样子了。

代码编辑器

编写应用代码的时候,用的工具叫代码编辑器。编辑器的品种有很多,有些擅长编写某种特定类型的应用。有些比较通用,什么类型的应用都可以用它来写。一开始,推荐大家选择一款通用的代码编辑器, VSCode 是个不错的选择。

我们的目的不是成为使用工具的大师,而是创造应用,提供服务,解决问题。一开始不要花太多精力挑选工具,定制工具。也不需要用太多时间专门训练工具的使用技巧,可以在实战中锻炼使用工具的技术。比如你发现在实际的工作中,有些动作你要不断地重复做,这时再去寻找解决的方法,提高工作效率。

任务:准备代码编辑器<VSCode>

  1. 在 VSCode 官方下载合适的版本
  2. 安装并打开 VSCode
  3. 熟悉如何打开 命令面板

VSCode 是一款通用的编辑器,开源,免费,跨平台,可定制,可扩展,Windows 与 macOS 用户都可以使用它。到 VSCode 官方网站下载合适的版本,然后把它安装在自己的电脑上。

VSCode 编辑器里能做的事情,你可以在 命令面板 里找到,所以你只需要先记住打开命令面板用的按键组合,然后在命令面板里搜索你想干的事儿就可以了。Windows 用户使用快捷键 ctrl + shift + P 打开命令面板,macOS 用户可以使用 command + shift + P 打开命令面板。不需要单独练习编辑技巧,等用到的时候再说。

任务:安装扩展<简体中文语言包>

  1. 打开编辑器的 Extensions(扩展)
  2. 搜索 chinese,安装 Chinese (Simplified) Language Pack
  3. 关掉编辑器,重新再打开 VSCode

VSCode 编辑器支持使用扩展来扩展本身的功能,如果你发现自己需要某个功能,但是编辑器本身并不提供这个功能,这时你就可以通过安装额外的扩展得到自己需要的功能。打开编辑器的扩展功能,然后搜索想要安装的扩展,点击安装(Install)就可以了。下面我们可以安装一个简体中文语言包这个扩展,先熟悉一下如何在编辑器里安装扩展。

VSCode 界面上显示的语言默认是英文的,如果你想使用其它的语言,需要额外安装一些语言包。编辑器最左边带小图标的那块地方叫活动栏(Activity Bar),点击 扩展(Extensions) 这个小图标。或者可以先打开命令面板,然后搜索并且打开 Install Extensions(安装扩展)。打开了编辑器的扩展,搜索要安装的扩展,比如搜索 Chinese,安装一下找到的 Chinese (Simplified) Language Pack 这个扩展,安装完成以后,重新启动编辑器,界面上显示的文字就会是简体中文的了。

打开项目

方法 1

打开 VSCode 编辑器,然后点击活动栏上的 资源管理器 小图标,在编辑器的侧边栏上会出现一个 打开文件夹 按钮,点击这个按钮,浏览到想要打开的项目目录。

方法 2

先打开终端,用 code 命令行工具打开项目目录,或者也可以先进入到项目所在的目录,再执行 code ./ 打开当前目录。示例:

cd ~/desktop/xb2-node
code ./

定制编辑器

VSCode 编辑器可以通过主题(Theme)改变界面的样式。如果你看到别人用的 VSCode 编辑器跟你自己的不太一样,大概就是因为他使用的颜色主题跟你用的主题不一样,或者他自己定制了一下某一款颜色主题。

VSCode 本身自带了几款主题,选择一款喜欢的主题,然后可以定制一些细节,或者也可以额外再安装一些主题。一般的颜色主题除了可以改变界面的样式,还会影响代码文字的样式。打开编辑器的 命令面板 ,然后搜索 Color Theme,打开 颜色主题 以后,会出现主题的列表,然后可以选择自己想要使用的主题。

在编辑器的资源管理器下面会显示打开的项目,项目里的目录与文件的左边都有一个小图标,这个小图标可以通过 文件图标主题 定制。打开 命令面板,然后搜索 File Icon Theme,会列出编辑器现有的文件图标主题,可以选择一款自己喜欢的,或者也可以再去安装新的文件图标主题。下面你看到的 Material Icon Theme 就是我额外安装的一款文件图标主题。

编辑器的功能,行为还有样式,可以在 设置 里去定制,打开 命令面板,然后搜索 Open Settings UI,可以打开图形界面的设置。

在 设置 里做的自定义的设置会保存在一个设置文件里,我们也可以直接修改这个设置文件来修改编辑器的设置。这个设置文件叫 settings.json,打开 命令面板,然后搜索 Open Settings JSON,可以打开这个设置文件。

如果你想要我的 VSCode 编辑器的配置,可以访问:https://github.com/ninghao/vscode-preferences,然后打开 settings.json 这个文件,用这个文件里的内容替换一下你的 VSCode 编辑器的 settings.json 文件里的内容。

本地开发环境

本地,在这里指的就是你用来做开发的这台电脑,本地开发环境,就是在这台电脑上搭建一个可以开发应用的环境。在本地开发的应用,可以在这个开发环境上运行。这样我们可以一边儿开发,一边儿运行,测试开发的这个应用。

我们会用 JavaScript 这种开发语言,开发一个服务端应用,在服务端运行使用 JavaScript 语言编写的应用,需要安装一个叫 Node.js 的东西,它提供了一个 JavaScript 语言的运行环境。所以在我们的本地开发环境上面,可以安装一个 Node.js,这样我们就可以在本地运行使用 JavaScript 语言编写的服务端应用了。

任务:准备本地开发环境<Node.js>

先访问 Node.js 的官方网站,下载适合自己的操作系统的 Node.js,如果你的电脑的操作系统是 Windows,就下载一个 Windows 版本的 Node.js,如果你用的是 Mac 电脑(苹果电脑),操作系统就是 macOS,所以你需要下载一个 macOS 版本的 Node.js。

Node.js 更新的挺快的,会不断发布新的版本,最新的版本会包含最新的功能。不过我们可能暂时不需要这些新的功能,所以我推荐大家先选择下载 LTS(长期支持) 版本的 Node.js。下载的时候最好选择安装包格式的版本,Windows 系统可以下载 .msi 格式的安装包,macOS 系统可以下载 .pkg 格式的安装包。

通过这种安装包安装 Node.js,会有一个安装向导。有一些 Node.js 的包需要编译之后才能用,编译这些包的时候会用到一些工具,在我们的系统里要包含这些工具才能正确的编译这些包。在 Windows 系统上安装 Node.js 的时候,可以选择自动安装所需要的工具,这样除了 Node.js,安装向导还会安装 Chocolatey,然后自动用这个工具去安装一些需要的工具,比如 Python,系统更新,Visual Studio 等等。macOS 用户可以在 App Store 找到 Xcode,把它安装在电脑上。

安装了 Node.js 以后,在系统里会多出两个命令行工具,一个是 node,可以用来运行 Node.js 应用。还有一个是 npm,可以管理项目的包。打开终端,执行 node -v 与 npm -v ,查看一下这两个东西的版本号。-v 这个选项指的是 Version,这是一个简写形式,选项还有个长版本的名字是 --version 。查看命令行工具的帮助,可以在命令的后面加上 -h 或者 --help 这个选项,比如 npm -h 。

创建应用<Node.js>

现在我们已经准备好了应用的开发环境,下面要去创建一个应用,然后再运行一下这个应用。

应用的开发工作大部分是在开发者自己的电脑上面完成的。我们是应用的开发者、作者,所以这个应用就是从你自己的电脑上开始的。先找个地方创建一个目录(文件夹),把应用需要的东西全部放在这个目录里面。

接下来要走的这条开发之路,会选择使用 JavaScript 这种语言表达自己的想法,设计应用的功能。应用要在 Node.js 提供的运行环境才能运行,所以,我们也可以说要开发的是一个 Node.js 服务端应用。

任务:创建一个服务端应用项目<Node.js>

1:进入到想在保存项目的地方

打开终端,Windows 可以使用 Cmder,新建一个 bash ad Admin 类型的命令行界面。macOS 的用户可以打开系统自带的终端。然后进入到想要保存项目的地方,比如要在系统的桌面上创建一个项目,可以执行:

cd ~/desktop

2:给项目新建一个目录

创建目录可以使用 mkdir ( Make Directory*) 这个命令,后面加上要创建的目录的名字就行了,比如我要在当前目录下创建一个叫 *xb2-node* 的目录,可以执行:

mkdir xb2-node

上面这行命令的意思就是在当前目录下面,创建一个叫 xb2-node 的目录,因为之前我们用 cd 命令进入到了桌面上,所以新创建的这个目录就会在桌面上(~/desktop/xb2-node)。

3:进入到项目所在的目录

用 cd 命令进入到项目所在目录的下面,或者也可以说把当前的工作目录换成项目所在的目录。这里我们可以使用一个相对的路径,也可以使用绝对的路径。

比如我现在的位置是 ~/desktop,这是系统的桌面,在桌面上有个 xb2-node 目录,使用相对的路径进入到这个目录,可以执行:

cd xb2-node

无论我们在哪里,都可以直接使用目录的绝对路径,比如:

cd /Users/wanghao/desktop/xb2-node;

在上面的目录路径里面 /Users/wanghao/desktop 是我的桌面位置,在你的系统里面应该是不一样的路径。这里的 /Users/wanghao 指的是用户的主目录,它有个代号是 ~(波浪号) ,也就是我可以使用 ~ 表示 /Users/wanghao,所以进入到我的桌面上的 xb2-node 这个目录的下面,也可以执行:

cd ~/desktop/xb2-node

3:用编辑器打开项目

code ./

上面这行命令的意思是用 VSCode 编辑器打开当前目录。 code 是安装了 VSCode 编辑器以后带的一个命令行工具,可以在命令行界面下使用这个工具打开某个文件或者目录。如果你发现在自己的命令行界面下不能使用这个 code 命令,不要在乎,你只需要打开 VSCode 编辑器,然后通过菜单打开项目所在的目录就可以了。

4:创建 package.json 文件

在 Node.js 项目的根目录下面,一般都会有一个叫 package.json 的文件,在这个文件里可以描述一下项目,比如项目的名字,版本号,作者等等。还可以自定义一些命令,描述项目依赖的包等等,在后面我们会继续编辑这个文件里的内容。

你可以手工创建这个文件,或者也可以用一个 npm 命令,执行:

npm init -y

把下面的内容放到这个 package.json 文件里:

{
  "name": "xb2-node",
  "version": "1.0.0",
  "description": "《小白兔的开发之路》演示项目",
  "author": "wanghao <wanghao@ninghao.net>"
}

上面你看到的就是一个 JSON 格式的内容,使用这种格式表示的数据在后面我们会经常看到。一般这种格式的数据可以先用一组大括号包装一下,里面是一些数据项目。每个数据项目大概由两部分组成,中间用冒号分隔开。左边可以看成是这个数据项目的名字,右边可以看成它表示的具体的数据,数据项目的名字与数据的周围都需要用双引号包装一下,数据项目之间用逗号分隔开,最后一个数据项目的结尾不能出现逗号。

比如 "name": "xb2-node", 在这个数据项目里, "name" 是这个数据项目的名字,"xb2-node" 是这个数据项目的值。很多语言或者工具都认识 JSON 这种格式的数据,它们都有方法把它转换成自己能看懂的数据格式。

在上面这个 JSON 数据里,使用的这几个数据项目的名字,不是我们自己造的,而是 Node.js 规定好的一些名字。

  • name:名字
  • version:版本号
  • description:描述
  • author:作者

所有标点符号都应该是英文状态下的,不能使用中文状态下的标点符号。比如逗号,应该是 , 不应该是  ,双引号应该是 "" ,不应该是 “” 。

任务:运行应用

1:创建一个 js 文件

src/main.js<新建>

const greeting = 'hello ~';
console.log(greeting);

在项目下面,新建一个文件,放在 src 目录的下面,文件的名字叫 main.js。 .js 作为文件的后缀,就表示这个文件里的内容是用 JavaScript 语言编写的。你可以随便命名文件,也可以自己决定怎么组织项目里的文件。 src 一般指的是 Source 的简写,有源头的意思。main 有 yg 的意思。

在 src/main.js 文件里添加了两行用 JavaScript 语言写的两行文字。先用 const 这个关键词声明了一个叫 greeting 的东西,这个东西代表的是一个文字类型的值,具体的值是 hello ~,通常我们管这种文字类型的数据叫字符串类型的数据,英文用 String 表示这种类型的数据。

字符串类型的值的周围会用引号包装,可以是单引号,也可以是双引号。也就是,如果你看到一个值,它的周围用了一组引号包装了一下,大概就可以判断这个东西的类型是字符串。

写完一行文字(代码),结尾要使用一个分号,如果不加这个分号也是可以的,解释 JavaScript 语言用的引擎会自动判断,帮我们加上需要的分号。正规的写法需要在结尾加上这个分号。

console.log(greeting), 意思是在控制台上输出 greeting 表示的值。这里我们用了一下 console 上的 log 方法提供的功能。JavaScript 语言本身带了大量的功能, console 就是其中的一个,这个东西上面又有很多方法, log 是在 console 上提供的一个方法,它能做的事情就是在控制台上输出指定的东西,这里我们用它输出了 greeting 表示的值。在方法的后面加上一组括号,意思就是要执行一下这个方法。

2:运行应用

node src/main.js

在终端,项目所在目录的下面,可以使用 node 运行一下刚才我们创建的应用。在电脑上安装了 Node.js 以后,就可以在终端使用 node 这个小工具,它可以运行指定的应用文件。这里我们用它运行了一下 src 下面的 main.js 这个文件,在这个文件里用了一个 console.log 在控制台上输出了 greeting 表示的值,所以运行它得到的结果就是,你会看到输出了 hello ~ 这行文字。

控制台,英文是 Console,在 Node.js 应用里,控制台指的就是一个终端窗口。也就是如果我在一个 Node.js 应用里说要在控制台上输出一个东西,你要知道这个东西会出现在运行这个应用的终端窗口上。

我们现在已经创建了一个非常简单的 Node.js 应用,然后用 node 运行了一下这个简单的应用,这个应用能做的事情就是在控制台上输出一行文字。

微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点