在前端开发中，Babel 是一个非常重要的工具。它可以将新版本的 ECMAScript 代码转换为向后兼容的 JavaScript 代码，让我们可以在现代的浏览器上运行和使用新的语言特性。而 @shopify/babel-preset 是一个由 Shopify 提供的 Babel 预设，它可以让我们更方便地使用一些常用的 Babel 插件，提高我们的开发效率。
安装
要使用 @shopify/babel-preset，需要在项目中先安装它。可以使用 npm 或 yarn 安装：
npm install --save-dev @shopify/babel-preset # 或者 yarn add --dev @shopify/babel-preset
配置
安装完成之后，需要在 Babel 配置文件中使用 @shopify/babel-preset。比如，你可以在 .babelrc.json 文件中添加以下内容：
{
"presets": ["@shopify"]
}这个配置会启用 @shopify/babel-preset 中所包含的所有默认插件和预设。
请注意，@shopify/babel-preset 依赖其他一些 Babel 插件，你需要在你的项目中安装这些插件。比如，如果你要使用 @shopify/babel-preset 中的 transform-react-jsx 插件，你需要同时安装它的依赖 @babel/plugin-syntax-jsx：
npm install --save-dev @babel/plugin-syntax-jsx
然后在 .babelrc.json 文件中添加以下内容：
{
"presets": ["@shopify"],
"plugins": ["@babel/plugin-syntax-jsx"]
}使用
配置完成之后，@shopify/babel-preset 中包含的插件就已经可用了。你可以使用像箭头函数、解构、async/await等新语法特性，它们会自动转换成向后兼容的代码。
如果你想使用 @shopify/babel-preset 中包含的插件的具体配置，可以查看它们的文档。比如，想要配置 transform-object-rest-spread 插件，可以在.babelrc.json 文件中添加如下内容：
{
"presets": ["@shopify"],
"plugins": [
["transform-object-rest-spread", { "useBuiltIns": true }]
]
}这个配置可以让 transform-object-rest-spread 插件使用内建的 Object.assign 方法而非使用 Babel 的帮助函数。
示例代码
下面是一个使用了 @shopify/babel-preset 的示例代码。这是一个使用了箭头函数、解构和 async / await 特性的 React 组件。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
----- - -
------ -
--
----------- - -- -- -
--------------- ------ ---------------- - - ---
--
----- ------------------- -
----- ---- - ----- -------------------
----- ------ - ----- ------------
--------------- ------ ------------ ---
-
-------- -
----- - ----- - - -----------
------ -
-----
--------- -----------
------- --------------------------------------
------
--
-
-
------ ------- ------------这段代码可以正常运行，在低版本的浏览器上也可以使用新特性，因为 @shopify/babel-preset 已经将它们转换成向后兼容的代码。
总结
使用 @shopify/babel-preset 可以帮我们更轻松地使用一些常用的 Babel 插件，提高我们的开发效率。在使用前需要安装和配置，如果需要使用插件的特定配置，可以参考它们的文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cd9aedbf7be33b25670ba