在 CRA 应用程序中导入时，如何对我的 `tsc` 编译的 `utils` npm 包进行 tree-shake？

Question

我想让它发挥作用，但我不知道从哪里开始。我控制两个 npm 包：

1. 前端 CRA 应用程序（我称之为

   FE

   ）
2. 一个

   utils

   包，用于在

   FE

   和其他一些此处不关注的包之间共享代码

FE

包依赖于

utils

（将其作为依赖项包含在

package.json

中），但

utils

还包含一些无法在浏览器中运行的特定于节点的代码（此代码由其他两个包导入，但不是

FE

）。直到最近一切都工作正常，但是当我将 CRA（react-scripts）从 v4 升级到 v5（在

FE

包中），并在后台切换到 webpack v5 后，我的 CRA 应用程序在加载时突然在浏览器中崩溃捆绑包（使用 CRA 开发服务器），因为它现在包含并运行与浏览器不兼容的 Node.js 代码。此代码适用于其他包，不应加载到

FE

包中。

我知道这是

utils

通过

index.ts

导出其所有代码并从那里导入

FE

导入特定函数的结果 - 尽管我不知道为什么它在 React-Scripts v4 上起作用，但现在突然不起作用了。 v5 上的 t。我知道我可以通过将所有实用程序直接作为单独的模块导出和导入来解决这个问题。但我宁愿动态地摇动任何我不自动导入的东西。 我在我的 CRA 应用程序中使用 CRACO (

FE

)，所以我确实能够修改其 webpack 配置。

所以我的问题是：我怎样才能设置这个树摇动，所以

FE

不再包含它在其捆绑包中不使用的实用函数？就像我说的，我真的不知道从哪里开始。我也有兴趣了解升级到react-scripts v5会导致它崩溃，以及是否可以简单地复制v4行为。

utils

包是通过

tsc

简单构建的 - 它不包括 webpack

// scripts section from utils/package.json
"scripts": {
  "start": "yarn build",
  "build": "tsc",
  "watch": "tsc -w",
  "postinstall": "patch-package",
  "prepare": "yarn build",
  "test": "jest"
}

这是

tsconfig.json

包的

utils

：

{
  "compilerOptions": {
    "target": "es6" ,
    "module": "commonjs" ,
    "lib": ["es2015", "es2016", "es2017"],
    "downlevelIteration": true,
    "allowJs": false,
    "skipLibCheck": true,
    "declaration": true,
    "outDir": "dist",

    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": false,
    "noImplicitThis": false,

    "baseUrl": "../",
    "paths": {
      "@schema": ["schema/index"],
      "@schema/*": ["schema/*"]
    },
    
    "esModuleInterop": true
  },
  "include": ["types/**/*", "**/*.ts"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts", "**/*.test.ts"]
}

Answer 1

当包在浏览器环境中运行时，Webpack@4 自动填充了许多 Nodejs 模块。您必须在 webpack@5 中手动执行此操作。

检查此链接，这是一个很好的起点：webpack@5 gist

我知道这不是树摇动，而是取决于模块的布局，如果没有进一步的代码修改，树摇动甚至可能无法工作。