本文将介绍如何使用 @sewing-kit/plugin-babel 为前端项目添加 Babel，使项目支持 ES6+ 特性。@sewing-kit 是一个由 Shopify 开源的构建工具，提供了一种快速构建 Web 应用和组件库的方式。@sewing-kit 的插件系统允许使用者根据需要选择性地添加各种功能插件。@sewing-kit/plugin-babel 便是其中一个插件。
安装
@sewing-kit 是一个基于 Node.js 的命令行工具，因此需要先安装 Node.js。请参考官方文档 https://nodejs.org 安装最新版本。安装好 Node.js 后，可以使用以下命令安装 @sewing-kit/plugin-babel：
npm install @sewing-kit/plugin-babel -D
-D 选项表示将 @sewing-kit/plugin-babel 安装为开发依赖，这是因为 Babel 只需要在开发环境编译，运行时不需要。如果你使用的是 yarn，可以使用以下命令：
yarn add @sewing-kit/plugin-babel -D
配置
@sewing-kit 使用 js-yaml 来解析 YAML 配置文件，因此需要在项目根目录创建一个 sewing-kit.config.yml 文件，并在其中添加以下内容：
plugins: - '@sewing-kit/plugin-babel'
配置文件格式从这里开始变得更加复杂，不过不用担心，下面会提供完整的示例。
默认情况下，@sewing-kit/plugin-babel 会使用 @babel/preset-env，以及一系列默认插件进行编译。如果你想自定义 Babel 配置，在配置文件中添加以下内容：
plugins:
- name: '@sewing-kit/plugin-babel'
options:
presets:
- "@babel/preset-react"
- "@babel/preset-typescript"
plugins:
- "babel-plugin-styled-components"以上配置中，presets 数组指定了要使用的预设，这里使用了 React 和 TypeScript 预设。plugins 数组指定了要使用的插件，这里使用了 styled-components 插件。更多关于 @babel/preset-env，@babel/preset-react 和 @babel/preset-typescript 的信息，请访问官方文档 https://babeljs.io/docs。
示例代码
最后，提供一个使用 @sewing-kit/plugin-babel 的完整示例，让大家更好地理解：
-- -------------------- ---- -------
- ---------------------
--------
- ----- --------------------------
--------
--------
- -------------------
- ---------------------
- --------------------------
--------
- ---------------------------------- -------------------- ---- -------
-- -------
------ ----- ---- --------
------ ------ ---- --------------------
----- ----- - ----------
---------- ----
----------- -------
------ --------------
--
----- ---- -------- - -- -- -
------ -
-----
------------- --------------
------
--
--
------ ------- ----运行 sewing-kit dev 启动项目，在浏览器中查看效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cf11bdbf7be33b25670e5