typescript - Rollup lägger inte till react-native-komponenter till bundle-importer


Jag försöker bygga ett react-native/-web-bibliotek för att dela komponenter mellan två projekt, men rollup känner inte igen react-native-komponenterna när de används i en komponent och svarar med detta fel:

(!) Unused external imports
View,Text,TouchableOpacity,ActivityIndicator,TextInput,Picker,FlatList,StatusBar imported from external module 'react-native' but never used
default imported from external module 'react-native-easy-content-loader' but never used
Svg,G,Path,default,Polygon,Polyline,Rect,Circle,Defs,Mask,Use imported from external module 'react-native-svg' but never used
TextInputMask imported from external module 'react-native-masked-text' but never used

Det betyder också att det inte importerar dem i paketfilerna:

import { StyleSheet, Platform, UIManager, LayoutAnimation, Dimensions, PixelRatio, Animated, PanResponder, Image } from 'react-native';

Det här är min rollup-konfiguration:

import alias from '@rollup/plugin-alias';
import jsx from 'acorn-jsx';
import path from 'path';
import typescript from 'rollup-plugin-typescript2';

import pkg from './package.json';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: 'esm',
      sourcemap: true,
    },
  ],
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  acornInjectPlugins: [jsx()],
  plugins: [
    alias({
      entries: {
        components: path.resolve(__dirname, './src/components'),
        context: path.resolve(__dirname, './src/context'),
        gql: path.resolve(__dirname, './src/gql'),
        types: path.resolve(__dirname, './src/types'),
        utils: path.resolve(__dirname, './src/utils'),
      },
    }),
    typescript({
      typescript: require('ttypescript'),
      tsconfigDefaults: {
        compilerOptions: {
          plugins: [
            {transform: 'typescript-transform-paths'},
            {transform: 'typescript-transform-paths', afterDeclarations: true},
          ],
        },
      },
    }),
  ],
};

och min tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "declaration": true,
    "declarationDir": "dist",
    "jsx": "react-native",
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "paths": {
      "components/*": [
        "src/components/*"
      ],
      "context/*": [
        "src/context/*"
      ],
      "gql/*": [
        "src/gql/*"
      ],
      "types/*": [
        "src/types/*"
      ],
      "utils/*": [
        "src/utils/*"
      ],
    },
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "../../node_modules",
    "dist",
    "src/**/*.stories.*",
    "src/**/*.test.*"
  ]
}

Jag är inte säker på om jag gör något fel i min konfiguration eller om detta är ett fel med rollup tree shaking. Hoppas någon kan hjälpa. Tack.

Svar #1

Jag försöker lista ut rollup med RN själv, men jag märkte ett stavfel i dina rollup-plugins:

require('ttypescript') bör vara require('typescript')

Detta kanske löser det eller kanske inte, men det verkar vara ett steg i rätt riktning.