随着前端技术的不断发展和更新，越来越多的开发者已经开始使用 ES6，这里我们提到其中的模板字符串（template string），其非常简洁易读且十分方便。但是，如果你在使用 Babel 将 ES6 代码编译为 ES5，对于模板字符串的编译，可能会遭遇到某些奇怪的问题。本篇文章就将为您详细介绍 Babel 编译 ES6 模板字符串崩溃的修复方法。
模板字符串的基础语法
ES6 的模板字符串有一些基础的语法，下面是一些示例代码：
// 习惯使用单引号或双引号，但模板字符串使用反引号 const str1 = `I'm a string`; const str2 = `My name is ${name}`; const str3 = `2 + 2 = ${2 + 2}`;
从上述代码中可以看出，模板字符串中引用外部变量可以使用${}语法。
Babel 编译模板字符串
Babel 是流行的编译器之一，它可以将 ES6+ 代码转换为 ES5 代码。如果您使用了模板字符串，您可能已经在项目中使用了它。Babel 使用的默认转换器称为 babel-preset-env。它可以识别并转换 ES6 特性，包括模板字符串。
一些开发人员可能会遇到一些非常奇怪的问题，如：代码可以在 Chrome 68 及更高版本中运行，却在 IE11 中崩溃，或者代码在 Babel 中编译时崩溃。
Babel 编译模板字符串崩溃的修复方法
方法 1：引入 polyfill
简单粗暴直接使用 polyfill，请你注意这个方案是有渲染性能的问题，如果字符串很多，那么 polyfill 的性能开销可能会很高。这种方法适用于您有一个现有项目，您需要将它从 ES5 迁移到 ES6。通过此方法，您可以在不更改您的代码的情况下使您的应用程序正常工作。以下是如何安装和使用 babel-polyfill 的示例代码。
安装:
npm install --save-dev babel-polyfill
使用：
import "babel-polyfill";
方法 2：在 .babelrc 中使用 babel-plugin-transform-es2015-template-literals 插件
这种方法足够优雅且 Babel 官方推荐使用的方式。我们可以使用@babel-plugin-transform-es2015-template-literals 插件在 .babelrc（Babel 配置文件）中来解决此问题。张首页可以先确保您的项目中已安装此插件，如果没有安装，请使用以下命令安装：
npm install --save-dev babel-plugin-transform-es2015-template-literals
接下来，在 .babelrc 文件中包含此插件：
{ "plugins": [ ["transform-es2015-template-literals", { "loose": true, "spec": true }] ] }
如果您正在使用 Babel 7, 那么在 .babelrc 中的 plugins 部分应该被重命名为 presets。
-- -------------------- ---- ------- - ---------- - --------------------- - ---------- - ------- ----- ---------- ----- --------- ----- --------- ------- -- -------------- -------- --------- ------- -- - -展开代码
还有一种使用插件的方式，是直接在 .babelrc 里引入 presets-env，其中 presets-env 是 Babel 官方从 6 版本开始引入的。
-- -------------------- ---- ------- - ---------- - - -------------------- - -------------- -------- --------- - - - - -展开代码
这是最好的做法，可能不全部解决此问题，但是它是官方推荐的，并且是最可靠的解决办法。
小结
在 ES6+ 编程中，模板字符串非常方便，易读性高，然而，在用 babel 将 ES6 编译为 ES5 时，我们经常遇到模板字符串崩溃问题。本篇文章详细介绍了修复 Babel 编译 ES6 模板字符串崩溃的两种方法：引入 polyfill 和在 .babelrc 中使用 babel-plugin-transform-es2015-template-literals 插件。对于这个问题，使用 babel-plugin-transform-es2015-template-literals 插件是最优解。让我们避免了使用过多不必要的库或代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c25ea4314edc2684b8f9d8
