为什么我在导入库时必须包含“/dist”？

Question

为什么我在导入库时必须包含“/dist”？

3

我正在使用vite作为构建工具编写一个React组件库。

我已经编译了项目并将其部署到npm注册表。当我从我的客户端应用程序导入它时，我必须在导入中包含"/dist"。

从客户端应用程序中，导入方式如下...

import { Tuple } from 'tuple-ui';

...在vscode中导致以下错误：

Could not find a declaration file for module 'tuple-ui'. '/arbitrary/path/tuple/dist/tuple.umd.js' implicitly has an 'any' type. Try `npm i --save-dev @types/tuple-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'tuple-ui';`ts(7016)

然而，当我在导入中包含“dist”时...

import { Tuple } from 'tuple-ui/dist';

...错误消失了。

以下是我的组件库的 vite.config.ts：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import dts from 'vite-plugin-dts';
import * as path from 'path';

export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/lib/index.ts'),
      name: 'tuple',
      fileName: 'tuple'
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        }
      }
    }
  },
})

这里是 package.json 文件：

{
  "name": "tuple-ui",
  "version": "0.0.10",
  "license": "MIT",
  "author": "budl",
  "scripts": {
    "dev": "vite",
    "tsc": "tsc",
    "tscv": "tsc --version",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "chromatic": "npx chromatic --project-token=e183f70dfe01"
  },
  "dependencies": {
    "chromatic": "^6.9.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-vite": "^0.1.38",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "babel-loader": "^8.2.5",
    "typescript": "^4.9.4",
    "vite": "^2.9.9",
    "vite-plugin-dts": "^0.9.10"
  },
  "readme": "ERROR: No README data found!",
  "type": "module",
  "files": [ "dist" ],
  "main": "./dist/tuple.umd.js",
  "module": "./dist/tuple.es.js",
  "exports": {
    ".": {
      "import": "./dist/tuple.es.js",
      "require": "./dist/tuple.umd.js"
    }
  }
}

- Bud Linville

“from 'tuple-ui/dist';” 在他们的文档中吗？这不是一个令人满意的答案，但我的猜测是开发者忽略了它。也许一些依赖于它的流行模块使用 /dist 作为入口点？这只是另一个猜测。 - symlink

2个回答

1

如果有其他人也犯了同样的错误，解决方法是在package.json中添加一个types字段，指向由dts生成的类型文件。

- Bud Linville

我已经有这个了，但仍然遇到了OP所描述的问题。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Raymond D. Mora · Accepted Answer

您之所以会遇到此错误，是因为您使用TypeScript开发了库，但没有在库中为TypeScript文件声明模块，即使您可以看到错误提示建议您运行以下命令以安装库的类型：
npm install @types/your-library-name

npm i --save-dev @types/tuple-ui

在这种情况下，您有两个选择：

1- 运行建议的命令，查看是否可以解决您的问题。

2- 编写库声明文件。（在此处可以获取更多有关此内容的文档：https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html）

当您导入/dist目录时，错误就会消失，因为在该目录中，您的TypeScript文件已转换为JavaScript。