typescript - 使用 Vite 发布 Vue 3 组件“库”的问题

Question

在使用 Vite 将 Vue 3 组件库（用 TypeScript 编写）发布到 npm 时，我遇到了以下问题：

TS2305: Module '"@observerly/celestia-vue"' has no exported member 'CelestiaSkyViewer'.

vite.config.js构建过程如下：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'
import typescript from '@rollup/plugin-typescript'

import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    {
      ...typescript({
        tsconfig: './tsconfig.json'
      }),
      ...vue()
    },
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, '/src'),
    },
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'celestia-vue',
      fileName: (format) => `celestia-vue.${format}.js`
    },
    rollupOptions: {
      external: [
        'vue',
        '@observerly/celestia'
      ],
      output: {
        sourcemap: false,
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

我的 package.json 如下：

{
  "name": "@observerly/celestia-vue",
  "version": "0.1.0",
  "description": "The Celestia Sky Viewer Vue.js (Vue 3 + Typescript) Component",
  "repository": "https://github.com/observerly/celestia-vue.git",
  "author": "Michael Roberts <[e-mail]>",
  "license": "MIT",
  "files": [
    "dist"
  ],
  "main": "./dist/celestia-vue.umd.js",
  "types": "./dist/src/index.d.ts",
  "module": "./dist/celestia-vue.es.js",
  "exports": {
    ".": {
      "import": "./dist/celestia-vue.es.js",
      "require": "./dist/celestia-vue.umd.js"
    }
  },
  "unpkg": "./dist/celestia-vue.umd.js",
  "jsdelivr": "./dist/celestia-vue.umd.js",
  "scripts": {
    "vite:dev": "vite",
    "serve": "vue-cli-service serve",
    "vite:serve": "vite preview",
    "build": "vue-cli-service build",
    "vite:build": "vue-tsc --noEmit && vite build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "peerDependencies": {
    "@headlessui/vue": "^1.4.1",
    "@observerly/celestia": "^0.2.10",
    "@vueuse/core": "^6.0.0",
    "axios": "^0.21.1",
    "date-fns": "^2.23.0",
    "vue": "^3.2.6"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@rollup/plugin-typescript": "^8.2.5",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/cli-plugin-babel": "4.5.0",
    "@vue/cli-plugin-eslint": "4.5.0",
    "@vue/cli-plugin-typescript": "4.5.0",
    "@vue/cli-plugin-unit-jest": "4.5.0",
    "@vue/cli-service": "4.5.13",
    "@vue/compiler-sfc": "^3.2.6",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "autoprefixer": "^10.3.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "lint-staged": "^9.5.0",
    "postcss": "^8.3.6",
    "rollup-plugin-postcss": "^4.0.1",
    "tailwindcss": "^2.2.9",
    "typescript": "^4.4.2",
    "vite": "^2.5.2",
    "vue-jest": "^5.0.0-0",
    "vue-tsc": "^0.3.0"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

我的 tsconfig.json 如下：

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    /* Basic Options */
    // "incremental": true,                         /* Enable incremental compilation */
    "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": [
      "es6",
      "esnext",
      "es2016",
      "dom",
      "dom.iterable",
      "scripthost"
    ],                                              /* Specify library files to be included in the compilation. */
    "allowJs": true,                                /* Allow javascript files to be compiled. */
    // "checkJs": true,                             /* Report errors in .js files. */
    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
    "declaration": true,                            /* Generates corresponding '.d.ts' file. */
    // "declarationDir": "lib",                     /* Offers a way to configure the root directory for where declaration files are emitted.
    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": false,                             /* Generates corresponding '.map' file. */
    // "outFile": "./",                             /* Concatenate and emit output to single file. */
    "outDir": "dist",                               /* Redirect output structure to the directory. */
    "rootDir": "",                                  /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                           /* Enable project compilation */
    // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
    // "removeComments": true,                      /* Do not emit comments to output. */
    // "noEmit": true,                              /* Do not emit outputs. */
    "importHelpers": true,                          /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
    /* Strict Type-Checking Options */
    "strict": true, /* Enable all strict type-checking options. */
    "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                    /* Enable strict null checks. */
    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
    /* Additional Checks */
    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
    /* Module Resolution Options */
    "moduleResolution": "node",                     /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "baseUrl": ".",                          /* Base directory to resolve non-absolute module names. */
    "paths": {
      "@/*": [
        "src/*"
      ]
    },                                              /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                             /* List of folders to include type definitions from. */
    "types": [
      "webpack-env",
      "jest"
    ],                                              /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true,           /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
    /* Source Map Options */
    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
    /* Experimental Options */
    // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
    /* Advanced Options */
    "resolveJsonModule": true, /* Include modules imported with '.json' extension */
    "skipLibCheck": true, /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "test"
  ]
}

我的组件在 Vue 3 项目的 src/components 目录中，旁边有一个index.ts文件：

export {
  default as CelestiaSkyViewer
} from '../components/CelestiaSkyViewer.vue'

这是我将开始导出我构建的各种组件的地方。

在我的项目中，我也有 /src/index.ts：

export { CelestiaSkyViewer } from './components/index'

同样，我将从这里开始导出组件。

然而，我仍然遇到上述错误......存储库在这里：https ://github.com/observerly/celestia-vue以获得完整的概述。

接下来我可以尝试什么？

标签： typescriptnpmvuejs3rollupvite