使用babel源而不是babel包(@babel/*)

Question

我希望将babel嵌入到我的项目中，使用源代码版本(github.com/babel)而不是打包版本(npm @babel/*)，以获得更好的(webpack)树抖动(@babel/*是cjs，github.com/babel是mjs/ts/flow)的好处。

我使用需要node_modules/@babel/*的第三方库，我希望配置TypeScript使其使用node_modules/babel/packages/babel-*/src。

我知道在TypeScript中没有模块别名。

我尝试了compilerOptions.paths，但没有成功：

    paths: {
        '@babel/code-frame': ['babel/packages/babel-code-frame/src'],
        '@babel/...': ['babel/packages/babel-.../src'],
        ...
    }

是否有任何要求@babel/*指向babel/packages/babel-*/src的技巧？

注意：在我的webpack配置文件中，我使用：

resolve: {
    alias: {
        '@babel/code-frame': 'babel/backages/babel-code-frame/src',

我在找打字稿的等价物。

相关上下文：https://github.com/FranckFreiburger/vue3-sfc-loader/issues/7

(如果需要的话，可以问我更多的细节)

编辑：我认为这个问题的解决注定要失败，因为TypeScript不能导入流文件。我唯一的选择是等待将Babel从Flow迁移到TypeScript PR的决议。

Answer 1

为此，您可以使用Lerna。只要重构和额外的工作对你来说是可以的。

Lerna是什么？

Lerna是一个用于管理多个包的JavaScript项目的工具，如Babel、react、material-ui等Monorepos。Lerna优化了使用git和npm管理多包存储库的工作流程。Lerna还可以减少开发和构建环境中大量软件包副本的时间和空间需求--这通常是将项目划分为多个单独的NPM包的一个缺点。有关细节，请参阅提升机文件。

https://github.com/lerna/lerna

Lerna将如何解决最初的问题？

您的包可以相互依赖，这意味着您可以将您自己的babel包放入您的回购包中，并让其他包依赖于您的“自定义”Babel包。您必须从外部Babel中选择退出，并将所需的Babel包放入您自己的manage文件夹中。这将是大量的工作，如果你有不同的libs，这将需要不同的巴贝尔版本。但是，如果所有版本都相同，则可以将Babel添加为对自定义-Babel包的依赖项。小心以后不要把它们混在一起。

假设您有两个包：

• packages/module1
• packages/@babel-custom

在Lerna环境中，每个包都有自己的package.json。这允许我们将@babel-custom/core添加到包的依赖项(在我们的例子中是module1/package.json )。

若要添加您的包：

# Install module-1 to module-2
lerna add @babel-custom --scope=module1

更多示例：https://github.com/lerna/lerna/tree/main/commands/add#readme

您还可以防止安装像这样的依赖关系：lerna bootstrap --hoist --nohoist=babel-*__。

，TreeShaking呢？

在将所有内容链接到Lerna之后，您可以将您的compilerOptions.paths更改为如下所示：

"paths": {
      "@babel-custom/core": ["./packages/@babel-custom/src"]
}

为了明确起见，您可以使用通配符。如果您有多个子包并希望单独引用它们，这是非常方便的。

"paths": {
      "@babel-custom/core/*": ["./packages/@babel-custom/src/*"]
}

有一篇文章是这样写的：https://rossbulat.medium.com/typescript-working-with-paths-packages-and-yarn-workspaces-6fbc7087b325 Sidenote: npm和纱线都是这样工作的。

最后一步是准备好您的packages/@babel-custom/index.js

export { default as BabelPackage} from './BabelPackage';
export * from './BabelPackage';

一旦通过Lerna安装了依赖项，就可以导入或要求它们，如下所示：

packages/module1/index.js

// import syntax

import { BabelPackage } from '@babel-custom/core'; // named import, top level
import BabelPackage from '@babel-custom/core/BabelPackage'; // import, second level

// require syntax

const { BabelPackage } = require('@babel-custom/core');
const BabelPackage = require('@babel-custom/core/BabelPackage ');

如果您想了解更多关于优化绑定的知识，可以阅读以下内容：https://material-ui.com/guides/minimizing-bundle-size/

您可能想看看这个Repo：https://github.com/mui-org/material-ui，packages/babel-plugin-unwrap-createstyles下面有一个babel包。