掌握targets目标配置提升构建效率的实战经验分享

核心代码就这几行，targets用起来贼简单

最近在项目里折腾了一个小功能，涉及到 targets 的使用。说实话，一开始我还以为这玩意儿挺复杂，结果一看文档，嘿，真香！直接上代码，感受一下：

const targets = require('targets');

// 定义目标规则
const rule = {
  browsers: ['last 2 versions', 'not dead', '> 0.2%']
};

// 解析目标环境
const result = targets.parse(rule);

console.log(result);

就这么几行代码，跑起来之后你会看到当前支持的目标浏览器列表。亲测有效，建议直接用这种方式。

三种场景下targets最好用

我在实际开发中总结了几个特别适合用 targets 的场景，分享给大家。

1. 配合 Babel 做兼容性处理

这个场景我用得最多。比如你写了一些 ES6+ 的新特性代码，但需要兼容到低版本浏览器，这时候 targets 就能帮你快速生成一个合理的配置：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['last 2 versions', '> 1%', 'not dead']
        }
      }
    ]
  ]
};

这样 Babel 会根据你定义的浏览器范围自动引入 polyfill，省了不少事。

2. 动态判断运行时环境

有时候我们需要动态判断用户的浏览器是否符合我们的最低要求。这时候可以用 targets 来解析用户的 UserAgent：

const targets = require('targets');

function isBrowserSupported(userAgent) {

  const parsed = targets.parseUserAgent(userAgent);

  const required = targets.parse({ browsers: ['last 2 versions'] });
  return targets.satisfies(parsed, required);

}
const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36';

console.log(isBrowserSupported(userAgent)); // true 或 false

`>

<p>这里注意下，我踩过坑：有些老旧的 UserAgent 可能解析失败，记得加个兜底逻辑。</p>

<h3>3. 构建工具中的目标配置</h3>

&lt;p&gt;像 Webpack、Vite 这些构建工具，也可以通过 &lt;code&gt;targets&lt;/code&gt; 来优化输出。举个 Vite 的例子：&lt;/p&gt;</code></pre>javascript

import { defineConfig } from 'vite';

import targets from 'targets';
export default defineConfig({

  build: {

    target: targets.parse({ browsers: ['defaults'] })

  }

});

<pre class="pure-highlightjs line-numbers language-none"><code class="no-highlight language-none">&lt;p&gt;这样可以确保打包出来的文件是针对特定浏览器优化过的，性能提升很明显。&lt;/p&gt;
&lt;h2&gt;踩坑提醒：这三点一定注意&lt;/h2&gt;

&lt;p&gt;虽然 &lt;code&gt;targets&lt;/code&gt; 用起来方便，但有几个地方真的让我折腾了半天，必须提醒大家：&lt;/p&gt;

&lt;ul&gt;

  &lt;li&gt;&lt;strong&gt;别乱配规则&lt;/strong&gt;：我之前手贱写了 &lt;code&gt;browsers: [&#039;all&#039;]&lt;/code&gt;，结果打包体积直接翻倍，性能也下降了。记住，规则越宽松，兼容性越好，但代价也越大。&lt;/li&gt;

  &lt;li&gt;&lt;strong&gt;版本问题&lt;/strong&gt;：如果你用的是旧版 &lt;code&gt;targets&lt;/code&gt;，可能会遇到解析不准确的情况。建议升级到最新版本，至少是 v3.x。&lt;/li&gt;

  &lt;li&gt;&lt;strong&gt;多环境冲突&lt;/strong&gt;：如果你同时用 Babel 和 Webpack 配置了 &lt;code&gt;targets&lt;/code&gt;，可能会出现重复处理的问题。这种情况下，建议只在一个地方配置。&lt;/li&gt;

&lt;/ul&gt;
&lt;h2&gt;高级技巧：自定义扩展规则&lt;/h2&gt;

&lt;p&gt;如果你想更灵活地控制目标环境，可以通过自定义规则来实现。比如：&lt;/p&gt;</code></pre>javascript

const customRule = {

  browsers: ['Chrome >= 80', 'Firefox >= 78', 'Safari >= 14'],

  node: '14'

};
const result = targets.parse(customRule);

console.log(result);

`>
这里的重点是，你可以针对不同的环境（比如浏览器和 Node.js）分别定义规则，灵活性非常高。
这个技术的拓展用法还有很多
以上是我个人对 targets 的完整讲解，有更优的实现方式欢迎评论区交流。这个技巧的拓展用法还有很多，比如结合 CI/CD 自动化测试、动态加载 polyfill 等等，后续会继续分享这类博客。