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.