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

node中使用import

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

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的详细信息。

接下来,从终端使用以下命令创建一个新文件。

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

创建节点服务器

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

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

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

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

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

使用Babel

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

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

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

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

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

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

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

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

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

结论

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

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

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

node中使用import

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值