如何在Node.js中使用Import语句?

时间:2024-03-22 17:20:35

在下面的文章中,您将学习如何在最低配置的Node项目中设置Babel。

如何在Node.js中使用Import语句?
Cesar Carlevarino Aragon的 “手持工具批次”, Unsplash

我并不总是喜欢尝试设置Nodejs应用程序的不同版本。 不要误会我的意思。 我确实相信尝试一下自己的设置,因为它确实可以带来新的学习成果,但是这样做是有局限性的。 最近,我发现自己更经常会设置Nodejs服务器来开发RESTful API。 此外,服务器必须以一种客户端可以轻松使用API​​的方式与客户端一起工作。 对于客户端开发,我正在使用ReactJS。

在客户端和服务器之间进行上下文切换时,我经常发现自己在此过程中犯了人为错误。 最常见的方法之一是在Nodejs文件中使用import语句。 这将导致语法错误,称为“ Unexpected identifier 即使在我的本地计算机上切换到Nodejs v10 LTS之后,我仍然发现缺少使用ES6模块的情况令人失望。

为了克服此问题并减少开发过程中引起的错误数量,我阅读了一些教程,但决定对自己的设置进行网格划分。 这些教程虽然写得很棒,但大多数都使用一种几乎完全相反的方法。 在日常工作中使用全栈应用程序时,我希望保持一致性。

因此,我将向您展示在Node.js服务器端应用程序中使用import语句的精简,省时的版本。 要继续阅读本文,请确保在本地计算机上安装了以下软件:

模拟项目入门

我称其为模拟是因为我将从头开始构建此设置。 在本教程结束时,我将保留指向Github存储库的链接,该存储库可用作许多Node.js和Express项目的入门工具包。 您可以完全跳到链接部分和DIY。 这里没有复杂性。 如果您仍然好奇,请继续阅读这篇简短的文章。

首先,创建一个新目录,遍历该目录,并使用npm对其进行初始化。

将项目初始化为npm项目后,可以签出package.json文件。 它将填充您用于配置npm的详细信息。

接下来,在您的终端上使用以下命令创建一个新文件。

如何在Node.js中使用Import语句?

这就是我们设置最低项目目录所需的全部。 在下一节中,我们将介绍必须安装哪些依赖项以及为什么需要这些依赖项。

创建节点服务器

要创建服务器,我将使用Express。 要将Express作为依赖项包含在我们的项目中,请从终端运行以下命令。

接下来,使用以下代码附加index.js文件。

您可以通过运行命令node index.js来运行服务器。 访问URL http://localhost:3000/ ,您将在浏览器窗口中看到一条消息: Hello from Nodejs!

这表明服务器的代码是正确的。 现在将index.js的第一行修改为:

运行相同的命令node index.js并停留在终端窗口中。 这次服务器没有启动,因为过程中有错误。 这是我在本文开头告诉您的错误。 默认情况下,Nodejs无法执行import语句。

如何在Node.js中使用Import语句?

使用Babel

我们需要的只是一个编译器,使我们可以使用ES6功能(例如Nodejs项目中的import语句)编写JavaScript。 什么是转译器?

编译器也称为源到源编译器,它们从以一种编程语言编写的源中读取代码,并以另一种语言生成等效的代码。

在我们的案例中,我们不会切换编程语言,而是需要使用LTS版本的Node尚不支持的新语言功能。 我将通过以下配置过程来设置Babel编译器并在我们的项目中启用它。

首先,您将必须安装一些依赖项,并注意-D标志,因为我们开发环境只需要这些依赖项。

安装它们后,将.babelrc文件添加到项目的根目录并添加以下配置:

配置过程的最后一步是在package.json添加一个dev脚本。 您可以根据自己的喜好为该脚本命名。 进行更改后,这将负责自动运行babel编译器(自动)。 这由babel-watch ,它还负责重新启动Nodejs Web服务器。

要查看它的动作,请确保index.js的以下代码使用如下的import语句。

从终端写nr dev 如果没有错误,您将获得以下信息:

如何在Node.js中使用Import语句?

其中nrnpm run简写。 您还可以在浏览器窗口中访问http://localhost3000/以验证结果,并查看服务器是否正在运行。

结论

本文向您展示了如何从头开始创建最低限度的最小Node服务器,以及如何使用Babel在Node.js环境中引入即将推出的JavaScript功能。 我敢肯定,现在您不会像在Nodejs中一样同样的人为愚蠢的人为错误, 插入您选择的前端框架/库 ????

Github存储库中提供了本文的完整代码????

From: https://hackernoon.com/how-to-use-import-statements-in-nodejs-94c85e23aeb7