nodejs esm,nodejs可以运行在浏览器上

　　如何在Nodejs或浏览器中直接运行esm代码？下面这篇文章介绍了在Nodejs或者浏览器中运行ESM代码的方法，希望对你有帮助！

　　node.js速度课程简介：进入学习

　　Esm是JavaScript模块化的未来。因为它解决了变量污染、代码维护和代码依赖的问题。它使你的代码更加科学。这也是deno默认采用esm的原因。

　　回到正题，有没有办法直接在Nodejs或者浏览器中运行esm代码？这是一个有趣又实用的问题。[推荐研究：《nodejs 教程》]

如何在 Nodejs 环境允许

1.利用编译工具运行 esm

　　最常见的方式是使用webpack等打包工具搭配babel。随着webpack和vue的流行，这些工具看似标配，但webpack的缺点也很明显。可以让commonjs和esm混用，导致代码中出现一些不规范的写法。我相信这种情况在业务代码中很常见，在antd3这样知名的第三方组件库中也存在。

　　Rollup基于ES6语法规范编译，轻量紧凑，非常适合封装npm库。新兴的打包工具如esbuild和swc也可以实现编译和打包。即使速度越来越快，但还是需要编译的过程。这些仓库的一个重要特征是esm语法的使用。

　　以上工具都可以应用于esm语法编译，但是有很多项目不一定需要打包编译这么费时的过程，比如一些cli工具，简单的微服务等。如何保证esm代码的高效正确运行？

2. 利用第三方库运行 esm

　　在Nodejs较低版本的情况下，我们可以利用一些工具。工具有几种形式，一种是模块加载器，另一种是命令行(简称cli)。

　　Module，这里介绍一下standard-things/esm，可以预加载第三方提供的esm包，从此可以babelless，bundleless。可以直接运行esm代码，不需要使用大型编译工具。如下使用它。

　　Node -r esm index.js同样，库egoist/esbuild-register也可以在esbuild的支持下实现模块加载器的效果。使用esbuild的高性能特性，代码运行效率更高。

　　Node-r es build-register index.js命令行，基于封装的cli，只是模块提前处理的另一种形式。Babel-node直接利用其Babel语法优势运行esm代码。由于babel本身就是js的实现，其官方文档也注明不建议在生产环境中使用，会导致内存占用高的问题，这也是这类工具的通病。

　　Babel-node index.js同样，esno可以直接在命令行运行esm代码。该原理基于esbuild。这里更推荐这种方法，因为esbuild是用go语言实现的，可以很大程度上解决内存占用高的问题，保证一定的执行性能。

　　esno索引. ts

　　第三方仓库Esmo index.ts适合在低版本nodejs和非生产环境下使用。它们的存在是为了方便，而不是实用和稳定。怎样才能高效运行esm代码？

3.Native Nodejs 运行 esm

　　所以使用Native Nodejs环境运行esm代码是非常必要的。更高版本的Nodejs提供了直接运行esm的功能。这里推荐lts14版本。运行esm代码有两种方式：

　　首先，键入：package.json中填入‘modules’来表示模块的类型。之后直接运行node index.js即可。

　　//pakage.json

　　{

　　.

　　类型“:”模块

　　}第二种是把文件名改成。mjs，表示文件是esm代码。这两种方法的最大区别是模块范围。前者是包的范围，它的声明是基于包的。后者基于文件维度，不受包的范围限制。

如何在浏览器运行 esm

　　浏览器不同于Nodejs环境，大多数新浏览器都支持esm。Esm级代码编译打包可以有效降低包体积和资源传输速度。这就是为什么像vite这样的框架采用了现代浏览器的打包模式(加上遗留兼容模式)。具体原理是在html中的script标签上加上type=module 表示引入了esm代码。当老浏览器不能支持esm时，会读取nomodule脚本中的地址和兼容版本的js代码。这样可以有效减少大部分浏览器加载的js量，保证老浏览器的兼容性。

　　脚本类型=模块 src=dist/index.js/script

　　脚本模块src= dist/index . legacy . js /script

总结

　　现在的Nodejs和浏览器环境对esm语法都有很好的原生支持。作为前端工程师，我们应该保持技术的前瞻性。写仓库的时候应该想到用typescript，esm还是common.js？为什么不选择一个相对新的js运行时环境来迎接Javascript的第三个时代呢？请参考《ESM Import 与 Bundleless》。

　　有关编程的更多信息，请访问：编程视频！就是这样直接在Nodejs或者浏览器中运行esm代码的。更多详情请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。