如何在React Native中使用Babel宏-CSDN博客

by Karan Thakkar

由Karan Thakkar

如何在React Native中使用Babel宏 (How to use Babel macros with React Native)

使用codegen.macro解决i18n问题的实际用例 (A practical use case for solving an i18n problem using codegen.macro)

If you follow Kent C. Dodds or Sunil Pai on Twitter, you may have read tweets every once in a while about babel macros. So did I. But it was only yesterday that I finally understood what the hype is all about. And it is glorious!

如果您在Twitter上关注Kent C. Dodds或Sunil Pai ，您可能偶尔会阅读有关babel宏的推文。我也是。但是直到昨天，我才终于了解了炒作的全部。 这是光荣的！

So, coming to the problem: I wanted to add some utility to do locale-based number formatting in React Native. Since there is no consistent support for the Internationalization API in React Native, I used a polyfill for it: https://github.com/andyearnshaw/Intl.js. Now, along with the polyfill, I also needed to import all the supporting locale files. There are two options here:

因此，问题来了：我想添加一些实用程序来在React Native中进行基于区域设置的数字格式设置。由于React Native中没有对Internationalization API的一致支持，因此我为其使用了polyfill： https : //github.com/andyearnshaw/Intl.js 。现在，除了polyfill，我还需要导入所有支持的语言环境文件。这里有两个选项：

Load all the locales: This is straightforward, as I can just import one file. This should usually be avoided, since it can unnecessarily bloat your bundle size if you just need to support some locales.
加载所有语言环境 ：这很简单，因为我只能导入一个文件。通常应该避免这种情况，因为如果您只需要支持某些语言环境，它可能会不必要地使软件包的大小膨胀。

2. Load only necessary locales: With this, I only load the locales that my app supports.

2. 仅加载必要的语言环境 ：这样，我仅加载我的应用程序支持的语言环境。

For example, if the app supports 40 locales, I have to manually end up writing 40 imports for each locale. It becomes much harder and more tedious to do this as the list of locales you support increases.

例如，如果应用程序支持40个语言环境，那么我必须手动结束为每个语言环境编写40个导入。随着您支持的语言环境列表的增加，执行此操作变得更加困难且乏味。

I wanted to automate this in a way that required no manual changes. This is especially useful for us as we have background jobs running on the CI that automatically update our locales file whenever we add support for a new language.

我想以一种无需手动更改的方式使它自动化。这对我们特别有用，因为我们有在CI上运行的后台作业，每当我们添加对新语言的支持时，该作业都会自动更新我们的语言环境文件。

How can I dynamically import multiple files but also allow the React Native packager to have all the file paths at compile time? babel-plugin-macros and codegen.macro ?

如何动态导入多个文件，但又如何允许React Native打包程序在编译时拥有所有文件路径？ babel-plugin-macros 和codegen.macro ？

这些是什么...小事？ (What are these…babel things?)

This blog post by Kent C. Dodds perfectly describes what babel-plugin-macros is:

Kent C. Dodds的此博客文章完美地描述了babel-plugin-macros 是：

It’s a “new” approach to code transformation. It enables you to have zero-config, importable code transformations.

这是代码转换的“新”方法。它使您可以进行零配置，可导入的代码转换。

codegen.macro is one such transformation that you can use to “generate code” at build time.

codegen.macro就是这样一种转换，您可以在构建时使用它来“生成代码”。

您如何设置？ (How do you set it up?)

React Native allows you to configure your own babel settings. You can create our own “.babelrc” file at the root of your project. To make sure that you use the default babel configuration that comes with React Native, install babel-preset-react-native.

React Native允许您配置自己的babel设置。您可以在项目的根目录下创建我们自己的“ .babelrc”文件。为了确保您使用React Native随附的默认babel配置，请安装babel-preset-react-native 。

On top of this you have to install another module: codegen.macro. The codegen plugin uses babel-plugin-macros under the hood to do its job. We’ll see in a bit what that is.

在此之上，您必须安装另一个模块： codegen.macro 。 Codegen插件使用babel-plugin-macros 在幕后做它的工作。我们将稍等一下。

codegen.macro是做什么的？ (What does codegen.macro do?)

It takes a piece of code, executes it, and replaces itself with the export-ed string. It will make a lot of sense once you see the example below. Given a list of locales and a codegen macro, it generates a list of imports at build time!

它需要一段代码，执行它，然后将其自身替换为export-ed字符串。一旦您看到下面的示例，这将很有意义。给定一个语言环境列表和一个codegen宏，它将在构建时生成一个导入列表！

但是，如果我需要突出显示语法怎么办？ (But, what if I need syntax highlighting?)

Since we’re writing all our code in a template string, it is really hard to get proper syntax highlighting. You might end up spending a lot of time trying to figure out why your macro gives an error while transpiling.

由于我们将所有代码都写在模板字符串中，因此很难正确地突出显示语法。您可能最终会花费大量时间试图弄清楚为什么在编译时宏会给出错误。

Thankfully, babel macros support a few different ways to use them. My favorite is using a codegen.require. With this, you can move the body of your macro into a separate file and require it wherever you want, as shown below:

值得庆幸的是，babel宏支持几种不同的使用方式。我最喜欢的是使用codegen.require 。这样，您就可以将宏的主体移到一个单独的文件中，并在任何需要的地方都需要它，如下所示：

使用此语法的优点： (Advantages of using this syntax:)

well, syntax highlighting ??‍
好吧，语法高亮
no need to escape any escape sequences you need to use like \n ?
不需要转义您需要使用的任何转义序列，例如\ n？

use template literals inside your codegen ?
在您的代码生成器中使用模板文字？

注意：升级React Native (NOTE: upgrading React Native)

If you choose to override the babel config, whenever you upgrade react-native, you must also bump the version of babel-preset-react-native to match the one being used inside that react-native version.

如果您选择覆盖babel配置，则每当升级react-native时，还必须更改babel-preset-react-native的版本以匹配该react-native版本中使用的版本。

That’s it folks! You’ve setup babel macros with React Native ?? Check out these other available macros if you wanna try out something different.

就是这样！您已经使用React Native设置了babel宏？如果您想尝试一些其他的宏，请查看其他可用的宏。

PS: Thanks to Narendra N Shetty, Siddharth Kshetrapal and Kent C. Dodds for reviewing the draft and helping shape it better ?

PS：感谢Narendra N Shetty ， Siddharth Kshetrapal和Kent C. Dodds审核了草稿并帮助使其成形更好？

Hi! ?‍ I’m Karan Thakkar. I work on React Native infrastructure at Skyscanner Engineering. Previously, I lead the web team at Crowdfire. I like trying out new technologies in my spare time and I’ve built Tweetify (using React Native) and Show My PR’s (using Golang).

嗨！我是K aran Thakkar。我在Skyscanner Engineering的 React Native基础设施上工作。以前，我领导C rowdfire的Web团队。我喜欢在闲暇时间尝试新的技术，我制造的T weetify (使用阵营母语)和S 怎么我的PR的 (使用Golang)。