@babel/plugin-syntax-import-attributes

What is @babel/plugin-syntax-import-attributes?

The @babel/plugin-syntax-import-attributes package allows Babel to parse import statements with attributes, which is a proposal for ECMAScript to allow additional metadata to be provided with import statements. This plugin only allows Babel to parse this syntax and does not transform it. It is useful for developers who want to use the proposed import attributes syntax in their codebase and ensure that Babel can correctly understand it.

What are @babel/plugin-syntax-import-attributes's main functionalities?

Parsing import statements with attributes

This feature allows Babel to parse import statements that include an 'assert' clause with attributes. This is part of a stage 3 proposal to allow asserting certain conditions on imported modules.

import json from './data.json' assert { type: 'json' };

Other packages similar to @babel/plugin-syntax-import-attributes

@babel/plugin-proposal-export-namespace-from

This package allows Babel to transform export * as ns from 'module' syntax, which is similar in that it extends the capabilities of module import/export syntax, but it focuses on export statements rather than import attributes.

@babel/plugin-proposal-dynamic-import

This package enables Babel to parse and transform the dynamic import() syntax, which is another extension to the module system in JavaScript. While it deals with dynamic imports rather than static import attributes, it is similar in that it enhances the module system.

@babel/plugin-transform-modules-commonjs

This package transforms ES6 modules to CommonJS, allowing for interoperability with module systems used in different environments. It does not handle import attributes but is related in terms of module system handling.

README

@babel/plugin-syntax-import-attributes

Allow parsing of the module attributes in the import statement

See our website @babel/plugin-syntax-import-attributes for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-syntax-import-attributes

or using yarn:

yarn add @babel/plugin-syntax-import-attributes --dev

Changelog

v7.26.0 (2024-10-25)

:rocket: New Feature

• babel-core, babel-generator, babel-parser, babel-plugin-syntax-import-assertions, babel-plugin-syntax-import-attributes, babel-preset-env, babel-standalone, babel-types
  • #16850 Enable import attributes parsing by default (@nicolo-ribaudo)
• babel-core
  • #16862 feat: support async plugin's pre/post (@timofei-iatsenko)
• babel-compat-data, babel-plugin-proposal-regexp-modifiers, babel-plugin-transform-regexp-modifiers, babel-preset-env, babel-standalone
  • #16692 Add transform-regexp-modifiers to preset-env (@JLHwung)
• babel-parser
  • #16849 feat: add startIndex parser option (@DylanPiercey)
• babel-generator, babel-parser, babel-plugin-syntax-flow
  • #16841 Always enable parsing of Flow enums (@nicolo-ribaudo)
• babel-helpers, babel-preset-typescript, babel-runtime-corejs3
  • #16794 Support import() in rewriteImportExtensions (@liuxingbaoyu)
• babel-generator, babel-parser
  • #16708 Add experimental format-preserving mode to @babel/generator (@nicolo-ribaudo)

:bug: Bug Fix

• babel-core
  • #16928 Workaround Node.js bug for parallel loading of TLA modules (@nicolo-ribaudo)
  • #16926 Fix loading of modules with TLA in Node.js 23 (@nicolo-ribaudo)

:nail_care: Polish

• babel-plugin-proposal-json-modules, babel-plugin-transform-json-modules, babel-standalone
  • #16924 Rename proposal-json-modules to transform-json-modules (@nicolo-ribaudo)

:house: Internal

• babel-code-frame, babel-highlight
  • #16896 Inline @babel/highlight in @babel/code-frame (@nicolo-ribaudo)
• babel-generator, babel-parser, babel-types
  • #16732 Add kind to TSModuleDeclaration (@liuxingbaoyu)

:running_woman: Performance

• babel-helper-module-transforms, babel-plugin-transform-modules-commonjs
  • #16882 perf: Improve module transforms (@liuxingbaoyu)