Nodejs나 브라우저에서 직접 esm 코드를 실행하는 방법

Nodejs 또는 브라우저에서 직접 esm 코드를 실행하는 방법은 무엇입니까? 다음 글에서는 Nodejs나 브라우저에서 ESM 코드를 실행하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

Commonjs

• CommonJs는 명령문을 동적으로 로드할 수 있으며 코드는 런타임에 발생합니다.
• CommonJs 내보내기 값은 복사본이므로 문제 해결이 어렵고 다양한 오염이 발생합니다

ES 모듈(이하 esm이라고 함)

• ESM은 정적이며 코드는 컴파일 타임에 발생합니다
• ESM 내보내기는 참조 값 이전의 매핑 관계이며 값을 읽을 수 있고 수정할 수 없습니다. 참고 CommonJs와 Es 모듈이 무엇인지 간략하게 분석해 보세요. 차이점은 무엇입니까?​

esm은 JavaScript 모듈화의 미래입니다. 변수 오염, 코드 유지 관리, 코드 종속성 문제를 해결하기 때문입니다. 코드를 더욱 과학적으로 만들어줍니다. 이것이 deno가 기본적으로 esm을 사용하는 이유입니다.

주제로 돌아가서, Nodejs나 브라우저에서 직접 esm 코드를 실행할 수 있는 방법이 있나요? 이것은 흥미롭고 실용적인 질문입니다. [추천 학습: "nodejs Tutorial"]

Nodejs 환경에서

허용하는 방법 1. 컴파일 도구를 사용하여 esm

을 실행하는 가장 일반적인 방법은 webpack과 같은 패키징 도구를 사용하는 것입니다. 바벨과 함께. webpack과 vue의 인기로 인해 이러한 도구는 표준이 된 것 같지만 webpack의 단점도 분명합니다. 이는 commonjs와 esm을 혼합하여 코드 작성에 일부 불규칙성을 초래한다고 생각합니다. 일반적으로 비즈니스 코드에 나타나며 antd3와 같은 잘 알려진 타사 구성 요소 라이브러리에도 존재합니다.

그리고 rollup은 ES6 구문 사양을 기반으로 컴파일되어 가볍고 컴팩트하며 npm 라이브러리 패키징에 매우 적합합니다. esbuild 및 swc와 같은 새로운 패키징 도구도 컴파일 및 패키징을 구현할 수 있습니다. 속도가 점점 빨라지고 있지만 컴파일 프로세스는 여전히 필요합니다. 이러한 저장소의 매우 중요한 기능은 esm 구문을 사용한다는 것입니다.

위 도구는 모두 esm 구문 컴파일에 적용할 수 있지만 일부 cli 도구, 간단한 마이크로서비스 등 시간이 많이 소요되는 패키징 및 컴파일 프로세스가 반드시 필요하지 않은 프로젝트도 많습니다. esm 코드가 올바르게 실행되고 있나요?

2. 타사 라이브러리를 사용하여 esm

낮은 Nodejs 버전의 경우 몇 가지 도구를 사용할 수 있습니다. 하나는 모듈 로더이고 다른 하나는 명령줄입니다(참조). cli의 경우).

여기에 소개된 standard-things/esm 모듈 로더는 타사에서 제공하는 esm 패키지를 미리 로드할 수 있으며 이제부터 바벨이 없고 번들이 없을 수 있습니다. 대규모 컴파일 도구를 사용하지 않고도 esm 코드를 직접 실행할 수 있습니다. 사용법은 다음과 같습니다.

node -r esm index.js

마찬가지로 egoist/esbuild-register 이 라이브러리는 esbuild의 지원으로 모듈 로더의 효과도 얻을 수 있습니다. esbuild의 고성능 기능을 활용하면 코드가 더 효율적으로 실행됩니다.

node -r esbuild-register index.js

캡슐화된 cli를 기반으로 하는 명령줄은 모듈 전처리의 다른 형태일 뿐입니다. babel-node는 바벨 구문을 직접 활용하여 esm 코드를 실행합니다. babel 자체는 여전히 js의 구현이기 때문에 공식 문서에는 프로덕션 환경에서 사용하지 않는 것이 좋습니다. 높은 메모리 사용량을 유발하며 이는 이러한 유형의 도구에서 흔히 발생하는 문제이기도 합니다.

babel-node index.js

마찬가지로 esno는 명령줄에서 직접 esm 코드를 실행할 수 있습니다. 원칙은 esbuild를 기반으로 합니다. 여기서는 이 방법을 더 권장합니다. esbuild는 go 언어로 구현되므로 높은 메모리 사용량 문제를 크게 해결하고 일정한 실행 성능을 보장할 수 있습니다.

esno index.ts
esmo index.ts

이러한 유형의 타사 웨어하우스는 낮은 버전의 nodejs 및 비프로덕션 환경에서 사용하기에 적합하며 실용성과 안정성이 아닌 편의성을 위해 존재합니다. esm 코드를 효율적으로 실행하는 방법은 무엇입니까?

3.Native Nodejs가 esm을 실행합니다

Node 버전 13.2.0에서 ES 모듈 기능을 공식적으로 지원하기 시작합니다

所以利用 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 코드를 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!