facebook / facebook/docusaurus

Allow custom babel config for content plugins

未关闭
#4,035 6 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
feature
主要语言
TypeScript
星标
66.2k
派生
10k
平均合并
1 天 3 小时
30 天内合并 PR
52

描述

## 🚀 Feature

### Have you read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/master/CONTRIBUTING.md#reporting-new-issues)?

Yes

## Motivation

I want to use tailwindcss in my docs/blog/pages.

You can see here the `createMDXLoaderRule` hardcodes the babel loader and doesn't allow configuring the `babelOptions`.

```
function createMDXLoaderRule(): RuleSetRule {
return {
test: /(\.mdx?)$/,
include: flatten(versionsMetadata.map(getDocsDirPaths))
// Trailing slash is important, see https://github.com/facebook/docusaurus/pull/3970
.map(addTrailingPathSeparator),
use: compact([
getCacheLoader(isServer),
getBabelLoader(isServer),
{
```

```
export function getBabelLoader(
isServer: boolean,
babelOptions?: TransformOptions | string,
): Loader {
return {
loader: require.resolve('babel-loader'),
options: getBabelOptions({isServer, babelOptions}),
};
}
```

```
export function getBabelOptions({
isServer,
babelOptions,
}: {
isServer?: boolean;
babelOptions?: TransformOptions | string;
} = {}): TransformOptions {
if (typeof babelOptions === 'string') {
return {
babelrc: false,
configFile: babelOptions,
caller: {name: isServer ? 'server' : 'client'},
};
} else {
return Object.assign(
babelOptions ?? {presets: [require.resolve('../babel/preset')]},
{
babelrc: false,
configFile: false,
caller: {name: isServer ? 'server' : 'client'},
},
);
}
}
```

## Pitch

The easy fix is to add `babelOptions` to the plugin config and pass it through.

---

Issue was identified thanks to: https://github.com/ben-rogerson/twin.macro/issues/125#issuecomment-677694758

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。