使用 babel 源代码而不是 babel 包 (@babel/*)答案

【问题标题】：use babel source instead of babel packages (@babel/*)使用 babel 源代码而不是 babel 包 (@babel/*)
【发布时间】：2020-12-15 10:41:07
【问题描述】：

我想使用源版本 (github.com/babel) 而不是打包版本 (npm @babel/*) 将 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',

我正在寻找打字稿的等价物。

（如有必要，请随时向我询问更多详细信息）

编辑： 我认为这个问题的解决注定要失败，因为（AFAIK）TypeScript 无法导入flow 文件。我唯一的选择是等待Migrate Babel from Flow to TypeScript PR 的解决。

【问题讨论】：

你有正确的想法：将 Webpack 别名与 TS 路径对齐。您只需要修复您的 tsconfig.json 路径，以便它们实际上指向某些东西。它们需要相对于 baseUrl，因此需要以 node_modules 为前缀
我只是对文件夹进行符号链接。
Typescript 仅在构建时。答案取决于您使用的运行时。 Webpack、节点、ts-node？span>
对不起，我看到你正在使用 Webpack。对于打字稿，您需要提供相对文件路径，如./node_modules/babel/packages...。该路径相对于tsconfig.json 中的baseUrl 参数。

标签： javascript typescript webpack babeljs vue3-sfc-loader

【解决方案1】：

您可以为此使用Lerna。只要您可以进行一些重构和额外的工作。

什么是 Lerna？：

Lerna 是一个用于管理具有多个包的 JavaScript 项目的工具，如 Babel、react、material-ui 等 Monorepos 中所见。 Lerna 优化了使用 git 和 npm 管理多包存储库的工作流程。 Lerna 还可以减少开发和构建环境中大量包副本的时间和空间需求——这通常是将项目分成许多单独的 NPM 包的缺点。详情请见hoist documentation。

https://github.com/lerna/lerna

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

您的包可以相互依赖，这意味着您可以将自己的 babel 包放入您的 repo，并让其他包依赖于您的“自定义”Babel-Packages。您必须选择退出外部 Babel 并将所需的 Babel-Packages 放入您自己的管理包文件夹中。如果你有不同的库需要不同的 Babel 版本，那将是很多工作。但是，如果版本都相同，您可以将 Babel 添加为您的 Custom-Babel-Package 的依赖项。之后小心不要混合它们。

假设您有 2 个包：

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

您也可以像这样阻止安装依赖项：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 旁注：npm 和 yarn 都适用于此。

最后一步是准备你的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 ');

如果您想了解有关优化 Bundle 的更多信息，可以阅读以下内容：https://material-ui.com/guides/minimizing-bundle-size/

你可能想查看这个 Repo：https://github.com/mui-org/material-uipackages/babel-plugin-unwrap-createstyles 下有一个 babel 包。

【讨论】：