使用es语法糖的项目文件，如何使用esno解释运行？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在前面的一系列React SSR的文章里面，大家也许注意到：苏南大叔一直使用esno来运行server.jsx文件，用于查看服务器端页面生成的最终效果。那么，为什么使用esno来执行，而不是使用node来执行呢？这就是本文试图讨论的问题。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程心得体会。本文测试环境：nodejs@20.18.0，esno@4.8.0，react-router-dom@6.27.0，react@18.3.1，express@4.21.1。

安装esno

esno是一种特殊的node程序，它可以直接识别那些高级语法。而通常来说，这些高级语法需要使用babel转义后才能使用。但是esno就可以直接识别并解释了。

建议全局安装esno：

npm i esno -g

如果--save_dev的话，就需要配置在scripts里面，再用npm run执行，才能正常运行esno。

查看版本号

查看版本号这件事情，在esno里面，变得有些复杂。因为大家公认的查看版本号的方式，返回值有些匪夷所思。

esno --version

输出：

tsx v4.19.2
node v20.18.0

npm info npm

输出：

esno@4.8.0 | MIT | deps: 1 | versions: 46

运行node程序

本质上来说，node命令是应该能运行解释一切非浏览器专属的.js文件的。然而，那些使用了超前语法代码（比如jsx）的文件，是无法解释运行的。这里不做列举。

这里就出现了esno的程序，可以算作是传统node解释器的es语法加强版。使用方式和node解释器是一致的。

esno your.js

运行React程序

React代码，最大的特点就是遍地的jsx语法组件。而esno默认是无法解释jsx文件的，开启方式也非常简单。那就是修改使用了jsx语法的文件名，修改成.jsx。各种自定义用于import的react文件，也需要是.jsx后缀。

值得一提的是：在create-react-app创建的基于webpack的各种项目里面，这些使用了jsx语法的文件，使用.js作为后缀的话，也是没有问题的。所以，是否修改文件名后缀，看实际需求。

总之，使用esno运行react程序的话，就需要.jsx文件名后缀。

esno server.jsx

nodemon + esno 组合

esno程序，解决的是.js代码里面使用es系列语法糖的问题。但是，苏南大叔在运行最近的SSR的server.jsx的时候，发现其并不适合用于调试这些express类的程序。因为一但代码出错，程序就停止运行了。所以，这里增加了一个伺服器的概念。全局安装nodemon命令的方式是：

npm i nodemon -g

伺服器nodemon可以用于私服各种需要长期运行的node类程序。那么对于本文来说，原命令继续变形：

nodemon --exec esno server.jsx

使用这个命令的话，就无惧那些调试的时候的各种报错了。nodemon会自动重启报错的esno server.jsx，这样就可以很方便快捷的调试代码了。

结束语

目前React SSR系列文件，大体更新完毕。接下来就是更新几篇相关的周边操作的文章。更多苏南大叔的react系列经验内容，可以参考链接：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。