0

我想使用源版本 ( github.com/babel) 而不是打包版本 (npm @babel/*) 将 babel 嵌入到我的项目中，以便更好地 (webpack) 摇树（@babel/*是 cjs，github.com/babel而是 mjs/ts/flow）。

我使用需要的第 3 方库，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

（如有需要，请随时询问我更多详情）

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

4

1 回答 1

0

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

什么是勒纳？：

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

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

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

您也可以像这样阻止安装依赖项：lerna bootstrap --hoist --nohoist=babel-*.

摇树呢？：

将所有内容与 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-ui在packages/babel-plugin-unwrap-createstyles.

于 2021-01-07T22:32:36.537 回答