当通过Typescript的BaseUrl导入模块时，RollupJS发出“未解析的依赖项”警告

nxagd54h 于 2022-11-18 发布在 TypeScript

关注(0)|答案(1)|浏览(160)

我将一个用TypeScript编写的库与RollupJs绑定在一起。在代码库中，我使用Typescript的BaseUrl进行了一些导入，如下所示。
第一个
这里的types文件夹是在src文件夹下，所以我可以使这个导入不使用相对路径感谢baseUrl配置。
Rollup捆绑软件包，但带有以下警告。
（！）未解析的依赖项https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
我相信Rollup将types/status视为外部依赖项，但实际上并非如此。如何使Rollup遵守baseUrl配置？
最后，我的汇总配置：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';
import image from '@rollup/plugin-image';
import copy from 'rollup-plugin-copy';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

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({ browser: true }),
      commonjs(),
      image(),
      typescript({
        tsconfig: './tsconfig.json',
        exclude: ['**/__tests__', '**/*.test.{ts,tsx}', '**/*.stories.tsx'],
      }),
      postcss({ modules: true }),
      copy({
        targets: [
          { src: './src/styles', dest: 'dist/esm' },
          { src: './src/styles', dest: 'dist/cjs' },
        ],
      }),
    ],
  },
  {
    input: 'dist/esm/types/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [dts()],
    external: [/\.css$/],
  },
];

typescript

来源：https://stackoverflow.com/questions/73024344/rollupjs-gives-unresolved-dependencies-warning-when-modules-imported-by-typesc

1条答案

按热度按时间

iqxoj9l91#

我遇到了同样的问题，并且该设置对我有效。tsconfig.json：

{
      "compilerOptions": {
        "target": "es5",
        "baseUrl": "src",
        "paths": {
          "components/*": ["components/*"],
          "themes/*": ["themes/*"]
        },
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "preserve",
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "noImplicitAny": false,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "plugins": [
          {
            "name": "typescript-tslint-plugin"
          }
        ],
        "sourceMap": true,
        "rootDir": "src",
        "importHelpers": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": false,
        "downlevelIteration": true
      },
      "include": ["src", "src/custom.d.ts"],
      "exclude": ["node_modules", "dist"]
    }

我在这里定义路径：

"baseUrl": "src",
    "paths": {
      "components/*": ["components/*"],
      "themes/*": ["themes/*"]
    },

并将其添加到dts的compilerOptions中，同时添加rollup-plugin-includepaths库以获得图像的正确路径。

import MOBILE_LOGO from 'components/auth/AuthPageContainer/assets/mobile_logo.svg';
import LOGO from 'components/auth/AuthPageContainer/assets/logo.svg';

我的汇总配置js：

import typescript from '@rollup/plugin-typescript';
import esbuild from 'rollup-plugin-esbuild';
import resolve from '@rollup/plugin-node-resolve';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import commonjs from '@rollup/plugin-commonjs';
import image from '@rollup/plugin-image';
import dts from 'rollup-plugin-dts';
import includePaths from 'rollup-plugin-includepaths';
import packageJson from './package.json';
import tsconfigJson from './tsconfig.json';

const config = [
  {
    input: 'src/index.ts',
    output: {
      file: packageJson.main,
      format: 'esm',
      sourcemap: true,
    },
    external: [
      ...(Object.keys(packageJson.dependencies) || {}),
      ...(Object.keys(packageJson.devDependencies) || {}),
    ],
    plugins: [
      includePaths({ paths: [tsconfigJson.compilerOptions.baseUrl] }),
      peerDepsExternal(),
      resolve({
        main: true,
        browser: true,
        preferBuiltins: false,
      }),
      commonjs(),
      typescript({
        tsconfig: './tsconfig.build.json',
        declaration: true,
        declarationDir: 'dist',
      }),
      image(),
      esbuild({
        minify: true,
      }),
    ],
  },

  {
    input: 'src/index.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    external: [/\.css$/],
    plugins: [
      dts({
        compilerOptions: {
          baseUrl: tsconfigJson.compilerOptions.baseUrl,
          paths: tsconfigJson.compilerOptions.paths,
        },
      }),
    ],
  },
];

export default config;

希望，它会帮助你。

赞(0）回复(0）举报 2022-11-18

我来回答

当通过Typescript的BaseUrl导入模块时，RollupJS发出“未解析的依赖项”警告

1条答案

相关问题

热门标签

最新问答