Babel
  • Docs
  • Setup
  • Try it out
  • Videos
  • Blog
  • Donate
  • Team
  • GitHub

›ES2015

Extensions

  • React Plugin
  • Flow Plugin
  • Typescript Plugin

Modules

  • AMD
  • Common JS
  • SystemJS
  • UMD

TC39 Proposals

  • async-do-expressions
  • decorators
  • do-expressions
  • export-default-from
  • function-bind
  • function-sent
  • partial-application
  • pipeline-operator
  • private-methods
  • record-and-tuple
  • throw-expressions

@babel/preset-env

    ES2022

    • class-properties
    • class-static-block
    • private-property-in-object
    • syntax-top-level-await

    ES2021

    • logical-assignment-operators
    • numeric-separator

    ES2020

    • export-namespace-from
    • nullish-coalescing-operator
    • optional-chaining
    • syntax-bigint
    • syntax-dynamic-import
    • syntax-import-meta

    ES2019

    • optional-catch-binding
    • json-strings

    ES2018

    • async-generator-functions
    • object-rest-spread
    • unicode-property-regex
    • dotall-regex
    • named-capturing-groups-regex

    ES2017

    • async-to-generator

    ES2016

    • exponentiation-operator

    ES2015

    • arrow-functions
    • block-scoping
    • classes
    • computed-properties
    • destructuring
    • duplicate-keys
    • for-of
    • function-name
    • instanceof
    • literals
    • new-target
    • object-super
    • parameters
    • shorthand-properties
    • spread
    • sticky-regex
    • template-literals
    • typeof-symbol
    • unicode-escapes
    • unicode-regex

    ES5

    • property-mutators

    ES3

    • member-expression-literals
    • property-literals
    • reserved-words
Edit

@babel/plugin-transform-template-literals

NOTE: This plugin is included in @babel/preset-env

Example

In

`foo${bar}`;

Out

"foo".concat(bar);

Installation

npm install --save-dev @babel/plugin-transform-template-literals

Usage

With a configuration file (Recommended)

Without options:

{
  "plugins": ["@babel/plugin-transform-template-literals"]
}

With options:

{
  "plugins": [
    [
      "@babel/plugin-transform-template-literals",
      {
        "loose": true
      }
    ]
  ]
}

Via CLI

babel --plugins @babel/plugin-transform-template-literals script.js

Via Node API

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-template-literals"],
});

Options

loose

boolean, defaults to false.

⚠️ Consider migrating to the top level mutableTemplateObject assumption.

// babel.config.json
{
  "assumptions": {
    "mutableTemplateObject": true
  }
}

When mutableTemplateObject is true, tagged template literal objects aren't frozen. All template literal expressions and quasis are combined with the + operator instead of with String.prototype.concat.

When false or not set, all template literal expressions and quasis are combined with String.prototype.concat. It will handle cases with Symbol.toPrimitive correctly and throw correctly if template literal expression is a Symbol(). See babel/babel#5791.

In

`foo${bar}`;

Out

"foo" + bar;

You can read more about configuring plugin options here

← sticky-regextypeof-symbol →
  • Example
  • Installation
  • Usage
    • With a configuration file (Recommended)
    • Via CLI
    • Via Node API
  • Options
    • loose
Babel
Docs
Learn ES2015
Community
VideosUser ShowcaseStack OverflowSlack ChannelTwitter
More
BlogGitHub OrgGitHub RepoWebsite RepoOld 6.x SiteOld 5.x Site