babel-plugin-macros

I need the text to translate. Please provide the content. [![构建状态][build-badge]][build] [![代码覆盖率][coverage-badge]][coverage] [![版本][version-badge]][package] [![下载量][downloads-badge]][npmtrends] [![MIT 许可证][license-badge]][license] ![所有贡献者][all-contributors-badge] [![欢迎PR][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]

问题

看看这个 在 Babel.js 博客上查看关于该问题、动机及完整说明的文章。 解决方案。

目前，babel 生态系统中的每个 babel 插件都需要你单独进行配置。对于语言特性来说，这没问题，但对于那些希望将编译时代码转换作为优化手段的库来说，这可能成为令人沮丧的额外负担。

本解决方案

babel-plugin-macros 定义了一个标准接口，供那些希望使用编译时代码转换的库使用，而无需用户在其构建系统中添加 babel 插件（除了 babel-plugin-macros，理想情况下它已经就位）。

例如，许多 css-in-js 库都有一个 css 标签模板字符串函数：

const styles = css`
  .red {
    color: red;
  }
`

该函数会将你的 CSS 编译成（例如）一个对象，其中包含为你定义的每个类生成的类名：

console.log(styles) // { red: "1f-d34j8rn43y587t" }

这个类名可以在运行时（在浏览器中）生成，但这有一些缺点：

• 存在 CPU 使用/时间开销；客户端需要在每次页面加载时运行代码来生成这些类
• 存在代码包体积开销；客户端需要接收一个 CSS 解析器才能生成这些类名，而打包这个解析器会使客户端需要解析的 JS 量更大。

为了帮助解决这些问题,许多 css-in-js 库编写了自己的 babel 插件,在编译时而不是运行时生成类名:

this guest post