By Dmitri Pavlutin

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom. In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

The ECMAScript module system (import and export keywords) can only import JavaScript code by default.

However, it is often convenient to keep the configuration of your application in a JSON file, so you might want to import the JSON file directly into the ES module.

The CommonJS module format has long supported importing JSON.

The good news is that a new proposal for phase 3, called the JSON module, provides a way to import JSON into the ES module. Now let’s take a look at how the JSON module works.

1. Import config. Json.

Suppose we have a config.json file that looks like this:

{"name": "My Application", "version": "v1.2"}Copy the code

How to import config.json into ES module?

For example, let’s create a simple Web application that displays the name and version of the application from a JSON configuration file.

If you try to import config.json directly, Node.js will throw an error.

import http from 'http';
import config from './config.json';
http
  .createServer((req, res) => {
    res.write(`App name: ${config.name}\n`);
    res.write(`App version: ${config.version}`);
    res.end();
  })
  .listen(8080);
Copy the code

Node.js raises TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension “.json” when attempting to run the application.

Node.js expects JavaScript code by default when it uses import statements. But thanks to the JSON module proposal, you can indicate the type of data you want to import: JSON.

Before fixing the application, let’s take a look at what the JSON module proposal contains.

2. JSON module proposal

The essence of the JSON module proposal is to allow JSON data to be imported into the ES module using regular import statements.

You can import JSON content by adding import assertions:

import jsonObject from "./file.json" assert { type: "json" };
Copy the code

Assert {type: “JSON “} is an import assertion indicating that the module should be parsed and imported as JSON.

The jsonObject variable contains ordinary JavaScript objects created after parsing the contents of file.json.

The content of a JSON module is imported using the default; named imports are not available.

JSON modules can also be dynamically imported:

const { default: jsonObject } = await import('./file.json', {
  assert: {
    type: 'json'
  }
});
Copy the code

When a module is dynamically imported, including a JSON module, the default content is available in the default property.

In this case, the import assertion represents the JSON type. However, there is a more general proposal for import assertions (currently in phase 3) that allows importing more data formats, such as CSS modules.

3. Enable the JSON module

Now let’s integrate the JSON module into our Web application:

import http from 'http';
import config from './config.json' assert { type: "json" };
http
  .createServer((req, res) => {
    res.write(`App name: ${config.name}\n`);
    res.write(`App version: ${config.version}`);
    res.end();
  })
  .listen(8080);
Copy the code

The main module now imports the config.json file and accesses its values config.name and config.version.

JSON module works in Node.js version >=17.1. Experimental JSON module can also be enabled with the — experimental-Json-modules flag

node --experimental-json-modules index.mjs
Copy the code

In the browser environment, the JSON module is available starting with Chrome 91.

4. To summarize

By default, ES modules can only import JavaScript code.

Thanks to the JSON module proposal, you can import JSON content directly into the ES module. Just use the import assertion after the import statement.

import jsonContent from "./file.json" assert { type: "json" };
Copy the code

You can use JSON modules starting with Node.js 17.1, using experimental-json-modules, and in Chrome 91 and above.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: dmitripavlutin.com/javascript-…

communication

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.