在下面的文章中,您将学习如何在最低配置的Node项目中设置Babel。
我并不总是喜欢尝试设置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
。 如果没有错误,您将获得以下信息:
其中nr
是npm run
简写。 您还可以在浏览器窗口中访问http://localhost3000/
以验证结果,并查看服务器是否正在运行。
结论
本文向您展示了如何从头开始创建最低限度的最小Node服务器,以及如何使用Babel在Node.js环境中引入即将推出的JavaScript功能。 我敢肯定,现在您不会像在Nodejs中一样犯同样的人为愚蠢的人为错误, 并 插入您选择的前端框架/库 。 ????
Github存储库中提供了本文的完整代码????
????Nodejs + Babel。 通过在GitHub上创建一个帐户,为amandeepmittal / node-babel-setup开发做出贡献。 github.com
From: https://hackernoon.com/how-to-use-import-statements-in-nodejs-94c85e23aeb7