Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to run esm code directly in Nodejs or browser. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

How to run esm code directly in Nodejs or browser?

Commonjs

CommonJs can dynamically load statements, and the code occurs at run time

The exported value of CommonJs is a copy, so it is difficult to troubleshoot and cause variable pollution.

ES module (hereinafter referred to as esm)

ESM is static, and the code occurs at compile time

ESM export has a mapping relationship before referencing values, and the values are all readable, so you cannot modify the reference analysis. What are CommonJs and Es Module? What's the difference?

Esm is the future of JavaScript modularization. Because it solves the problems of variable pollution, code maintenance, and code dependency. It makes your code more scientific. This is why deno defaults to esm.

To get back to the point, it's an interesting and practical question of how we can run esm code directly in Nodejs or browsers.

How to allow 1. 1 in Nodejs environment. Use compilation tools to run esm

The most common way is to use packaging tools such as webpack with babel. With the popularity of webpack and vue, these tools seem to have become standard, but the shortcomings of webpack are also obvious. It can mix commonjs and esm, resulting in some irregular writing of the code. I believe this situation is common in business code, as well as in well-known third-party component libraries such as antd3.

On the other hand, rollup is compiled based on the syntax specification of ES6, which is lightweight and compact, which is very suitable for the packaging of npm libraries. Emerging packaging tools such as esbuild and swc can also be compiled and packaged, even if the speed is getting faster and faster, but it still requires the process of compilation. An important feature of these repositories is the use of esm syntax.

The above tools can be applied to esm syntax compilation, but there are many projects that do not necessarily need to package and compile such a time-consuming process, such as some cli tools, simple micro services, etc., how to ensure efficient and correct running of esm code?

two。 Use the third party library to run esm

In the case of a lower version of Nodejs, we can take advantage of several tools, one is Module Loader, the other is Command Line (cli for short).

Module Loader, here introduces standard-things/esm, it can preload third-party esm package, from then on, you can do babelless, bundleless. You don't need to use large compilation tools to run esm code directly, as follows.

Node-r esm index.js

Similarly, with the support of esbuild, the library egoist/esbuild-register can also achieve the effect of Module Loader, making use of the high-performance characteristics of esbuild to make the code run more efficiently.

Node-r esbuild-register index.js

Command Line, based on the encapsulated cli, is just another form of pre-processing of the module. Babel-node directly takes advantage of its babel syntax to run esm code. Since babel itself is an implementation of js, its official documentation also indicates that it is not recommended to be used in a production environment, which can lead to high memory footprint problems, which is also a common problem of this type of tools.

Babel-node index.js

Similarly, esno can run esm code directly on the command line. The principle is based on esbuild. This method is more recommended here, in view of the fact that esbuild is implemented by go language, which can solve the problem of high memory consumption to a large extent and ensure a certain execution performance.

Esno index.tsesmo index.ts

This type of third-party warehouse is suitable for use in low-version nodejs and non-production environments, and they exist for convenience, not practicality and stability. How can I run esm code efficiently?

3.Native Nodejs runs esm

The ES Modules feature is officially supported by Node verison 13.2.0.

Therefore, it is very necessary to run esm code in the Native Nodejs environment. Higher versions of Nodejs provide the ability to run esm directly. It is recommended to use the lts14 version here. There are two ways to run esm code:

First, fill in type: "modules" in package.json to indicate the type of module. After that, just run node index.js directly.

/ / pakage.json {... "type": "modules"}

The second is to change the file name to .mjs, indicating that the file is esm code. The biggest difference between the two approaches is the module scope. The former is the scope of the package, and its declaration takes package as the dimension. The latter takes the file as the dimension and is not limited by the scope of the package.

How to run esm in a browser

Unlike the Nodejs environment, browsers support esm in most new versions of browsers. Esm-level code compilation and packaging can effectively reduce the package size and resource transfer speed. This is why frameworks like vite adopt the packaging mode of modern browsers (plus legacy compatibility mode). The specific principle is that adding type= "module" to the script tag in html indicates that it introduces esm code. When the old browser cannot support esm, it will read the address in nomodule script and read the compatible version of js code. In this way, it can effectively reduce the js volume loaded by most browsers and ensure the compatibility of the old browsers.

Today, both Nodejs and browser environments have good Native support for esm syntax. As front-end engineers, we should keep the technology forward. When we write a warehouse, do we want to use typescript,esm or common.js?

After reading the above, do you have any further understanding of how to run esm code directly in Nodejs or browser? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.