前言
使用 webpack 和 babel 来构建前端项目是非常常见的方式，而且也越来越成为主流。然而，由于各种原因，如浏览器支持度的不同，不同项目的目标浏览器可能也不同。这就意味着我们需要为不同的目标环境打包不同的代码，这就是多目标构建。在这篇文章中，我们将介绍一个 npm 包——webpack-babel-multi-target-plugin-with-presets，它可以帮助我们快速实现多目标构建。
安装
npm install webpack-babel-multi-target-plugin-with-presets -D
使用方法
配置 webpack
首先，我们需要将 webpack-babel-multi-target-plugin-with-presets 添加到 webpack 的配置文件中：
-- -------------------- ---- -------
-- -----------------
----- ----------------------------- - ----------------------------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------------------
------ -
-------- -
-- --------
------- ---
--- ---
--
-------- -
--------------------
----------------------
--
--
---
--
--在上面的示例中，我们通过传递一个 options 对象来配置 plugin。options 有一个 babel 对象，指定了编译的目标版本和使用的 preset。
编写代码
接下来，我们就可以开始编写我们的代码了。在代码中，我们可以使用 ES6/7、JSX 等高级特性，因为 plugin 会将它们编译成符合目标浏览器的代码。
例如，我们有一个组件如下：
import React from 'react';
const HelloWorld = () => {
return <div>Hello World</div>;
};
export default HelloWorld;那么 plugin 会将其编译成符合目标浏览器的代码：
const HelloWorld = function () {
return React.createElement('div', null, 'Hello World');
};多入口及多目标
就算我们有多个入口，每个入口也可以指定不同的目标版本：
-- -------------------- ---- -------
-- -----------------
----- ----------------------------- - ----------------------------------------------------------
-------------- - -
-- ---
------ -
------ -----------------
------ -----------------
--
-------- -
--- -------------------------------
-------------- -
------- ---
--- ---
--
------------ -
-
----- --------
-------- -
------- ---
--- ---
--
--
-
----- --------
-------- -
------- ---
--- --
--
--
--
------ -
-------- -
-- --------
------- ---
--- ---
--
-------- -
--------------------
----------------------
--
--
---
--
--在上面的代码中，我们通过 defaultTarget 指定默认的目标版本，在 entryPoints 中我们则指定了每个入口的目标版本。这意味着不同的入口可以有不同的目标版本。如果某个入口没有指定 targets，那么将会使用 defaultTarget。
webpack-dev-server
如果你使用 webpack-dev-server，那么你可以直接在配置文件中使用：
-- -------------------- ---- -------
----- ----------------------------- - ----------------------------------------------------------
-------------- - -
-- ---
---------- -
------- ----- ------- --------- -- -
----------------------- ------------- --------- -- -
------------------------------------------------------ --------- ------------------
-----------
---
--
--
-------- -
--- -------------------------------
------ -
-------- -
-- --------
------- ---
--- ---
--
-------- -
--------------------
----------------------
--
--
---
--
--在这种情况下，我们需要在 devServer.before 中注册一个 emit 事件，然后调用 WebpackBabelMultiTargetPlugin.prepareEmit 来编译代码。
总结
webpack-babel-multi-target-plugin-with-presets 可以帮助我们快速实现多目标构建。在我们需要为不同的目标环境打包不同的代码的时候，它可以让我们更加方便地实现这个功能。同时，由于它的集成非常简单，我们可以很容易地将它应用到我们的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822bbd