在前端开发中，我们常常需要使用 Babel 对 ES6+ 的代码进行编译以便在低版本浏览器中使用。但是在一些特定的情况下，我们可能需要排除某些代码块，比如:
- 第三方库已经支持了这些特性。
- 有些代码只需要在开发环境或测试环境中使用。
本文将介绍 Babel 在编译时如何排除这些代码块的方法。
快手入门
首先，我们需要安装 Babel 相关的工具，包括 @babel/core 和 @babel/cli。可以使用 npm 或 yarn 进行安装：
npm install @babel/core @babel/cli --save-dev
然后，在项目的根目录下创建一个 .babelrc 文件，配置如下：
-- -------------------- ---- ------- - ---------- - - -------------------- - ---------- - ----------- - ----- - --------- - - - - - -展开代码
这个 .babelrc 文件的意思是使用 @babel/preset-env 这个预设，将代码编译成最新的 ECMAScript 版本能够运行的代码，并且目标浏览器为最近的两个版本。
排除部分代码
如果我们想要排除部分代码，可以使用 @babel/plugin-transform-runtime 插件。这个插件会将一些不支持的新特性转化为相关的运行库，从而实现了跨浏览器兼容。
首先，我们需要安装这个插件：
npm install @babel/runtime @babel/plugin-transform-runtime --save-dev
然后，我们需要在 .babelrc 文件中添加以下配置：
-- -------------------- ---- ------- - ---------- - - -------------------- - ---------- - ----------- - ----- - --------- - - - - -- ---------- - - ---------------------------------- - --------- ------ ---------- ----- -------------- ----- --------------- ----- - - - -展开代码
在这个配置中，我们启用了 @babel/plugin-transform-runtime 这个插件，并且关闭了 corejs，启用了 helpers 和 regenerator，并且使用了 CommonJS 模块机制。
接下来，我们可以在代码中使用 exclude 关键字来排除部分代码块。比如，下面的代码将排除掉 someLib 和 otherLib 这两个库中的代码：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ - ----- - ---- ----------- -- ---------- -- --------------------- --- -------------- - -------------------------- - -- --------- ----- --- - --- -- --- ----- ---- - --------- -- - - --- ------------------ -- -------------- -- -------- -- ------ --------------- --- --------- - ------------------- ------------------ --- ----------- - -- ------- - --------------------- -展开代码
注意，exclude 关键字只会在编译时起作用，不会影响代码的运行时行为。而且，排除掉的代码块一般都是相对较小的，因为排除掉太多的代码块可能会导致项目无法正常运行。
小结
本文介绍了如何使用 Babel 在编译时排除部分代码，实现了更加精细化的代码转换。这项技术是前端开发中必须了解的一项基本技能，能够帮助我们更好的控制代码的大小和运行时效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb939c306f20b3a6b33d2b
