汇总包无法映射别名导入

Question

我正在尝试发布一个带有汇总的库，以构建一个捆绑包以供其他项目重用。

但是我在构建的包中遇到了导入映射问题，因为我在源代码中使用了路径别名。

举例

import theme from '@src/styles/modules/theme.module.scss'
import PdfIcon from '@src/assets/icons/pdf.svg'

我的汇总配置

import resolve from "rollup-plugin-node-resolve"
import babel from "rollup-plugin-babel"
import commonjs from "rollup-plugin-commonjs"
import typescript from "rollup-plugin-typescript"
import pkg from "./package.json"
import peerDepsExternal from "rollup-plugin-peer-deps-external"
import alias from '@rollup/plugin-alias';
export default [
  {
    input: "src/index.tsx",
    output: [
      {
        file: pkg.main,
        format: "es",
        sourcemap: true,
      },
    ],
    external: Object.keys(pkg.peerDependencies || {}),
    globals: { "styled-components": "styled" },
    plugins: [
      peerDepsExternal(),
      babel({
        exclude: "node_modules/**",
        extensions: [".ts", ".tsx"],
        include: ["src/**/*"],
      }),
      typescript(),
      resolve(),
      commonjs(),
      alias({
        entries: {
          "@src/*": "src/*"
        }
      })
    ],
  },
]

我生成的包

dist
  |
   index.js
  |
   index.js.map

当我尝试导入其他项目并运行时。我得到了错误

Module not found: Can't resolve '@src/styles/modules/theme.module.scss'
  21 | var core = require('@material-ui/core');
  22 | var ExpandMoreIcon = require('@material-ui/icons/ExpandMore');
> 23 | var theme = require('@src/styles/modules/theme.module.scss');
  24 | var React = require('react');
  25 | var MuiRadioGroup = require('@material-ui/core/RadioGroup');
  26 | var icons = require('@material-ui/icons');

提前致谢

Answer 1

尝试将alias 插件声明移动到插件列表的顶部。