在 Babel 中使用全局变量
Babel 是一个广泛运用于前端开发中的工具，它能够帮助开发者把 JavaScript 的新特性转化为支持各种浏览器的旧版本 JavaScript 的语法。在使用 Babel 进行开发时，我们可能需要使用全局变量来引用一些第三方库，例如 jQuery 和 Vue.js。
在使用全局变量时，我们需要告诉 Babel 如何处理这些变量，以确保代码能够正常运行。在本文中，我们将探讨如何在 Babel 中使用全局变量，以及如何在配置文件中指定全局变量。
使用全局变量
当我们使用全局变量时，我们可能需要在代码中声明这些变量。例如，如果我们想要引用 jQuery，我们可以在代码中使用以下语句：
$(document).ready(function() {
// Code goes here.
});然而，在一些情况下，我们可能不得不直接访问一个全局变量，例如：
Vue.use(Vuex);
在这种情况下，我们需要告诉 Babel 这个全局变量是存在的，并且不需要编译。
在 Babel 7 中，我们可以使用@babel/plugin-transform-runtime 插件来处理这些情况。该插件会自动将我们的代码切换到使用运行时的 helper 和 polyfills，并且会在代码中自动添加相应的引用。
在 Babel 6 中，我们需要使用@babel/transform-runtime 插件，并且需要在我们的代码中手动引用 helper 和 polyfills。这意味着我们需要使用以下语句：
import 'babel-runtime'; import 'core-js/fn/promise';
指定全局变量
在某些情况下，我们需要手动指定全局变量。例如，如果我们在代码中使用 jQuery 中的某个插件，我们可能需要指定$ 作为全局变量。
在 Babel 7 中，我们可以使用@babel/preset-env 预设来指定全局变量。我们只需要在.babelrc 文件中添加以下内容：
-- -------------------- ---- -------
-
---------- -
-
-------------------- -
---------- -
----------- -
----- - ---------
-
--
-------------- -------
-
-
--
---------- -
---- --------
-
-在本例中，我们指定了 jQuery 库的全局变量为$。现在，我们可以在代码中自由地使用$ 变量，而不必担心代码无法编译。
在 Babel 6 中，我们可以使用babel-preset-es2015 进行类似的操作。我们可以在.babelrc 文件中指定以下全局变量：
-- -------------------- ---- -------
-
---------- -
-
--------- -
---------- -----
-
-
--
---------- ---
------ -
------------- -
---------- -
--------
-
--
------- -
---------- -
----------
-
-
--
---------- -
--------- ----
-
-本例中，我们指定了jQuery 作为全局变量。在使用这个变量时，我们需要提前在代码中声明这个变量。
结论
在使用 Babel 进行前端开发时，全局变量是不可避免的。不过，我们需要确保代码不会因为这些变量而出现问题。在本文中，我们探讨了在Babel 中如何使用全局变量，并且提供了一些实用的示例代码。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d4ddca336082f254be1be