汇总未在捆绑包导入中添加本机组件

时间:2020-06-23 08:37:31

标签: typescript react-native rollupjs

我尝试建立一个react-native / -web库来在两个项目之间共享组件, 但汇总组件无法在组件中使用反应堆本地组件时识别此错误:

(!) 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

这也意味着它没有将它们导入捆绑文件中:

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

这是我的汇总配置:

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},
          ],
        },
      },
    }),
  ],
};

和我的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.*"
  ]
}

我不确定我的配置是否做错了,或者这是否是汇总树摇晃的错误。 希望有人能帮忙。 谢谢。

1 个答案:

答案 0 :(得分:0)

我正在尝试自己与RN汇总,但是我注意到您的汇总插件中有错字:

require('typescript')应该是{{1}}

此问题可能会解决,也可能无法解决,但这似乎是朝正确方向迈出的一步。