reactjs - 是否可以将 Material UI 作为 peerDependency 但将其类型保留为 DevDependency？

Question

是否可以将 Material UI 作为 peerDependency 但将其类型保留为 DevDependency？

我正在使用 React + Typescript 构建组件库，组件基于 Material UI 库，使用 Rollup 作为模块打包器。

这是我的 IInputProps 类型扩展 Material UI TextFieldProps 类型的示例。

import { TextFieldProps } from "@material-ui/core";

export type IInputProps = TextFieldProps & {...}

我的目标是将 Material UI 包设置为 peerDependency，因此它将使用安装在目标项目上的 material-ui 包。我将 Material UI 作为 peerDependency 插入，并使用 peerDepsExternal 插件设置 rollup。当我尝试构建包时，它抛出以下错误:

找不到模块“@material-ui/core”或其相应的类型声明。

原因与这个答案有关(What's the relationship of @material-ui/core and @types/material-ui?)。 Material-UI 包包含它自己的类型定义(*.d.ts 文件)，所以当我将它设置为 peerDependency 时，类型/接口(interface)丢失了。为了解决这个问题，我遵循了这个解决方案(https://github.com/ezolenko/rollup-plugin-typescript2/issues/198)在 src/@types/material-ui/index.d.ts 文件中声明每个模块，但它引发了另一个问题:我不能使用 material-ui 类型/接口(interface)不再。

在我的 src/@types/material-ui/index.d.ts 文件中声明了 @material-ui/core，代码在下面指出了这个错误。

不能将命名空间“TextFieldProps”用作 type.ts(2709)

导出的类型别名“IInputProps”具有或正在使用私有(private)名称“TextFieldProps”.ts(4081)

现在，我只能看到这两个解决方案:

1. 将整个素材 ui 包保留在我的库中并丢失包大小:

Library with Material UI packages as peerDependency
npm notice package size:  101.0 kB
npm notice unpacked size: 493.6 kB

Library with Material UI packages
npm notice package size:  1.2 MB
npm notice unpacked size: 6.0 MB

1. 使用 Material UI 作为 peerDependency，但丢失 Material UI 类型/接口(interface)和 lint(通过向我的类型/接口(interface)添加一个属性来接受任何 prop - TypeScript interface that allows other properties)。

[x:string]:any

所以，我想知道是否有任何方法可以将 Material UI 作为 peerDependency 但将其类型保留为 devDependencies，这样我就可以将它作为 peerDependency 与 Material UI 捆绑在一起并使用它的类型在我的包裹上？

我的配置如下:

src/@types/material-ui/index.d.ts

declare module "@material-ui/core";

rollup.config.js

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import image from "@rollup/plugin-image";
import typescript from "rollup-plugin-typescript2";

const packageJson = require("./package.json");

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    image(),
    typescript({ useTsconfigDeclarationDir: true })
  ]
};

tsconfig.json

{
  "compilerOptions": {
    "rootDir": "src",
    "declaration": true,
    "declarationDir": "build",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "sourceMap": true,
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "typeRoots": ["./src/@types"]
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "build",
    "storybook-static",
    "src/**/*.stories.tsx",
    "src/**/*.test.tsx"
  ]
}

package.json

...
"main": "build/index.js",
  "module": "build/index.esm.js",
...
,
  "peerDependencies": {
    "@material-ui/core": "^4.11.4",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
  },
...

Answer 1

如果您希望使用“外部”@material-ui/core(即不是汇总的一部分)，您应该这样指定。

Rollup 实际上有 documentation在对等依赖项上，它确实指定使用 externals，例如 lodash:

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [resolve({
    // pass custom options to the resolve plugin
    customResolveOptions: {
      moduleDirectory: 'node_modules'
    }
  })],
  // indicate which modules should be treated as external
  external: ['lodash']
};