怎样在Nodejs或是电脑浏览器立即运作esm代码？下边本文给大家介绍一下在Nodejs或电脑浏览器运作ESM代码的方式，希望能帮助到大家！
Commonjs
- CommonJs 能够动态加载句子，编码出现于运行中
- CommonJs 导出来值是复制, 不太好清查造成自变量环境污染
ES module(后面通称 esm)
- ESM 是静态的，编码出现于编译时
- ESM 导出来是引入值以前都存在着映射关系，而且值全是可读的，不可以改动 参照 浅谈什么叫CommonJs和Es Module？有何不同？
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 版本号相对较低的状况，我们可以利用一些专用工具，工具使用方式有多种，一种是 Module Loader，另一种是 Command Line（称之为 cli）。
Module Loader，这儿详细介绍standard-things/esm，它能够 preload 第三方所提供的 esm 包，此后，能做到 babelless, bundleless。我们不需要应用大中型编译工具可以直接运作 esm 编码，使用方法如下所示。
node -r esm index.js
一样，egoist/esbuild-register这一库在 esbuild 的大力支持下，一样能做到 Module Loader 效果，运用 esbuild 的高性能特点，程序执行更有效率。
node -r esbuild-register index.js
Command Line，根据封装形式后 cli，只不过是换一种的方式进行模块提早解决。babel-node立即运用它 babel 词法优点来运作 esm 编码。因为 babel 自身或是 js 的实现，它官方文档也证明不会最好在工作环境应用，也会导致内存高占用难题，也就是这一类工具的使用常见问题。
babel-node index.js
一样，esno可以直接在cmd运作 esm 编码。基本原理根据 esbuild。在这儿更建议使用这种方法，由于 esbuild 是通过 go 语言表达完成，能很大程度上处理内存高占用难题，确保了一定的落实特性。
esno index.ts
esmo index.ts
这一类第三方仓库适宜于低版 nodejs 且非生产性自然环境应用，它们的存在就是为了便捷性，而并非好用性和稳定性。怎么才能有效地运作 esm 编码？
3.Native Nodejs 运作 esm
Node verison 13.2.0 起开始正式适用 ES Modules 特点
因此运用 Native Nodejs 自然环境运作 esm 编码是非常有必要的，高版本的 Nodejs 带来了立即运作 esm 的功效，这儿最好使用 lts14 版本号。主要有两种方式运作 esm 编码：
第一种，package.json 中填好 type: "modules"，说明模块种类。自此，立即运作node index.js就可以。
// pakage.json
{
...
"type": "modules"
}第二种，则是将文件夹名称改为.mjs，标出该文件是 esm 编码。两种方式本质区别乃是控制模块修饰符。前者包的修饰符，它申明要以 package 为层面。后面一种则以文档为层面，不受制于包的修饰符。
怎样用浏览器运作 esm
浏览器状况不同于 Nodejs 自然环境，在绝大部分的最新版本电脑浏览器也支持 esm 的运转。esm 级别代码编译和装包，可以有效的降低包的体积和网络资源传输速率。这也就是为什么像 vite 那样的框架会使用现代浏览器的包装玩法（另加 legacy 兼容）的主要原因。实际的基本原理要在 html 之中的 script 标识添加type="module" 则说明它引进是指 esm 编码，当旧电脑浏览器无法适用 esm 的情形下，他会载入nomodule script里的详细地址，载入适配版本 js 编码。这样一来，可以有效的降低绝大多数电脑浏览器载入的 js 容积，又确保了老浏览器兼容问题。
<script type="module" src="dist/index.js"></script>
<script nomodule src="dist/index.legacy.js"></script>
汇总
现如今 Nodejs 和电脑浏览器自然环境都可以对 esm 词法拥有非常好的 Native 适用。做为前端开发的你我，应当始终保持着技术性的前瞻性，写一个仓库情况下，我们应该想起得用 typescript，esm 或是 common.js 呢？为什么不选较为一个新的 js 软件环境，迎来 Javascript 的第三个时期，参照《ESM Import 与 Bundleless》。
大量程序编写基本知识，请访问：编程视频！！
以上就是关于怎样在Nodejs或是电脑浏览器立即运作esm代码的具体内容，大量欢迎关注AdminJS其他类似文章！