`@babel/preset-modules`——模具行业从业者必备知识手册

system 2

<h2>@babel/preset-modules</h2>

<blockquote>
<p>️ Starting from <code>@babel/preset-env</code> 7.9.0, you can enable the <a href="https://babeljs.io/docs/en/babel-preset-env#bugfixes"><code>bugfixes: true</code> option</a> to get the same behavior as using <code>@babel/preset-modules</code>, but with support for custom <code>targets</code>.</p>
<p>If you need to target browsers with native modules support (like this preset does), you can use <code>targets: { esmodules: true }</code>.</p>
</blockquote>

<p>A Babel preset that enables async/await, Tagged Templates, arrow functions, destructured and rest parameters, and more <strong>in all modern browsers</strong> (<a href="https://caniuse.com/#feat=es6-module">88% of traffic</a>).</p>

<p>It works around bugs and inconsistencies in modern JavaScript engines by converting broken syntax to the closest non-broken modern syntax. Use this in place of <code>@babel/preset-env</code>'s <a href="https://babeljs.io/docs/en/babel-preset-env#targetsesmodules">target.esmodules</a> option for smaller bundle size and improved performance.</p>

<p>This preset is only useful for browsers. You can serve the output to modern browsers while still supporting older browsers using the <a href="https://philipwalton.com/articles/deploying-es2015-code-in-production-today/">module/nomodule pattern</a>:</p>

<h4>Features Supported</h4>

<ul>
<li>JSX spread attributes are compiled to Object.assign() instead of a helper.</li>
<li>Default, destructured and optional parameters are all natively supported.</li>
<li>Tagged Templates are fully supported, patched for Safari 10+ and Edge 16+.</li>
<li>async/await is supported without being transpiled to generators.</li>
<li>Function name inference works as expected, including Arrow Functions.</li>
</ul>

<h4>Installation & Usage</h4>

<p>Install the preset from <a href="https://www.npmjs.com/package/@babel/preset-modules">npm</a>:</p>

<pre><code>
npm install @babel/preset-modules --save-dev
</code></pre>

<p>To use the preset, add it to your <a href="https://babeljs.io/docs/en/configuration">Babel Configuration</a>:</p>

<pre><code>
{
"presets": [
"@babel/preset-modules"
]
}
</code></pre>

<p>If you're implementing the module/nomodule pattern, your configuration might look something like this:</p>

<pre><code>
{
"env": {
"modern": {
"presets": [
"@babel/preset-modules"
]
},
"legacy": {
"presets": [
"@babel/preset-env"
]
}
}
}
</code></pre>

<h4>Options</h4>

<p>There's a single Boolean <code>loose</code> option, which defaults to <code>false</code>. Passing <code>true</code> further reduces output size.</p>

<p>The <code>loose</code> setting turns off a rarely-needed function name workaround for older versions of Edge. If you're not relying on <code>Function.prototype.name</code>, it's worth enabling loose mode.</p>

<p>Babel’s <code>preset-env</code> is great, since it lets you define which Babel features are needed based on a browser support target. In order to make that plumbing work automatically, the preset has configuration that groups all of the new JavaScript syntax features into collections of related syntax transforms. These groups are fairly large, for example "function arguments" includes destructured, default and rest parameters. The groupings come from the fact that Babel’s transforms often rely on other transforms, so they can’t always be applied in isolation.</p>

<p>From this grouping information, Babel enables or disables each group based on the browser support target you specify to preset-env’s <a href="https://babeljs.io/docs/en/babel-preset-env#targets">targets</a> option. For modern output, the [targets.esmodule</p>

<hr>
<p>你在实际生产中遇到过类似问题吗？欢迎留言讨论。</p>