RollupError：预期表达式 - React Native 和 Expo 图标

Question

我有一个yarn/lerna单一存储库，其中包含包含在组件库中的反应本机包。

当我想使用汇总进行构建时，我收到此错误，该错误来自我的包（@expo/icons）的依赖项

[!] RollupError: Expression expected
../../node_modules/@expo/vector-icons/build/createIconSet.js (39:27)
37:                 }
38:                 if (!this.state.fontIsLoaded) {
39:                     return <Text />;
                               ^
40:                 }
41:                 return (<RNVIconComponent ref={(view) => {
    at error (C:\Users\Usuario\Desktop\test\cds-croma\node_modules\rollup\dist\shared\parseAst.js:279:30)
    at nodeConverters (C:\Users\Usuario\Desktop\test\cds-croma\node_modules\rollup\dist\shared\parseAst.js:2153:9)
    at convertNode (C:\Users\Usuario\Desktop\test\cds-croma\node_modules\rollup\dist\shared\parseAst.js:1038:12)
    at convertProgram (C:\Users\Usuario\Desktop\test\cds-croma\node_modules\rollup\dist\shared\parseAst.js:1029:48)
    at Object.parseAstAsync (C:\Users\Usuario\Desktop\test\cds-croma\node_modules\rollup\dist\shared\parseAst.js:2219:20)
    at Module.tryParseAsync (C:\Users\Usuario\Desktop\test\cds-croma\node_modules\rollup\dist\shared\rollup.js:14923:21)
    at Module.setSource (C:\Users\Usuario\Desktop\test\cds-croma\node_modules\rollup\dist\shared\rollup.js:14504:35)
    at ModuleLoader.addModuleSource (C:\Users\Usuario\Desktop\test\cds-croma\node_modules\rollup\dist\shared\rollup.js:18798:13)

这是我的 rollup.config.js

import typescript from '@rollup/plugin-typescript'
import commonjs from '@rollup/plugin-commonjs'
import { nodeResolve } from '@rollup/plugin-node-resolve'

export default {
  input: ['src/index.ts'],
  output: {
    dir: 'dist',
    format: 'esm',
    sourcemap: true,
    preserveModules: true
  },
  external: ['react/jsx-runtime', 'react', 'react-native'],
  plugins: [nodeResolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' })]
}

这是我的 tsconfig：

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "ESNext",
    "lib": ["DOM", "ESNext"],
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true,
    "target": "ESNext",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "declaration": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "allowJs": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

我对这个捆绑器没有太多经验，所以任何帮助都会很高兴。 预先感谢并抱歉我的英语不好。

Answer 1

我有一个带有纱线的项目（lerna + rollup）。 对于图标的导入，我使用 url 插件

import url from '@rollup/plugin-url';

，例如汇总配置看起来像

import {defineConfig} from 'rollup';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import {terser} from 'rollup-plugin-terser';
import url from '@rollup/plugin-url';

import * as fs from 'fs';
import path from 'path';

const PACKAGE_NAME = process.cwd();
const packageJson = JSON.parse(fs.readFileSync(path.join(PACKAGE_NAME, 'package.json'), 'utf-8'));

const includePaths = ['**/*.woff', '**/*.woff2', '**/*.svg', '**/*.png'];

export default defineConfig({
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: false,
      name: packageJson.name,
    },
    {
      file: packageJson.module,
      format: 'es',
      sourcemap: false,
      name: packageJson.name,
    },
  ],
  plugins: [
...
    url({
      fileName: '[name][extname]',
      include: includePaths,
      limit: 0,
    }),
  ],
});

您可以查看更详细的信息我的仓库