Website-Suche

reactjs - Was sind die richtigen Schritte, um eine Typescript/ES6 React-Native-Komponente als npm-Paket vorzubereiten und zu veröffentlichen?


Ich habe eine sehr einfache react-native-Komponente, die ich auf npm veröffentlichen möchte, damit andere Apps sie nutzen können. Folgendes ist src/index.tsx:

import React from 'react';
import { View, Text } from 'react-native';

class MyText extends React.Component {
  render() {
    return (
      <View>
        <Text>{'Hello'}</Text>
      </View>
    );
  }
}
export default MyText;

Ich möchte, dass mein Code in Typescript geschrieben wird. Ich werde webpack verwenden, um den Code zuerst von Typescript nach ES6 zu transpiliere, dann von ES6 nach ES5.

Hier ist meine package.json:

{
  "name": "@myproject/mycomponent",
  "version": "0.0.1",
  "description": "",
  "main": "build/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@types/react-native": "^0.57.38",
    "babel-loader": "^8.0.5",
    "metro-react-native-babel-preset": "^0.51.1",
    "prettier": "^1.16.4",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "peerDependencies": {
    "react": "^16.8.1",
    "react-native": "^0.58.4"
  },
  "files": [
    "build/**/*"
  ]
}

Und babel.rc:

{
  "presets": ["@babel/react", "@babel/preset-env", "@babel/typescript", "module:metro-react-native-babel-preset"],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-react-jsx"
  ]
}

Und webpack.config.js:

var path = require('path');

module.exports = {
  entry: './src/index.tsx',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|build)/,
        use: [{ loader: 'babel-loader' }],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
};

Wenn ich yarn install und dann yarn run build ausführe, erhalte ich die folgenden Fehler:

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve '@babel/runtime/helpers/classCallCheck' in '/Users/evian/projects/mycomponent/src'
 @ ./src/index.tsx 1:207-255

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve '@babel/runtime/helpers/createClass' in '/Users/evian/projects/mycomponent/src'
 @ ./src/index.tsx 1:298-343

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/Users/evian/projects/mycomponent/src'
 @ ./src/index.tsx 1:505-553

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve '@babel/runtime/helpers/inherits' in '/Users/evian/projects/mycomponent/src'
 @ ./src/index.tsx 1:593-635

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve '@babel/runtime/helpers/interopRequireDefault' in '/Users/evian/projects/mycomponent/src'
 @ ./src/index.tsx 1:27-82

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve '@babel/runtime/helpers/possibleConstructorReturn' in '/Users/evian/projects/mycomponent/src'
 @ ./src/index.tsx 1:400-459

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve 'react' in '/Users/evian/projects/mycomponent/src'
 @ ./src/index.tsx 1:671-687

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve 'react-native' in '/Users/evian/projects/mycomponent/src'
 @ ./src/index.tsx 1:706-729

Warum bekomme ich diese Fehler? Wenn ich dann yarn add react react-native ausführe (das heißt, ich installiere diese Bibliotheken tatsächlich in meinem Projekt und habe sie nicht einfach nur als Peer-Abhängigkeiten), und erneut yarn run build ausführe, bekomme ich jede Menge Fehler der folgenden Art:

ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'AccessibilityInfo' in '/Users/evian/projects/mycomponent/node_modules/react-native/Libraries/react-native'
 @ ./node_modules/react-native/Libraries/react-native/react-native-implementation.js 23:11-39
 @ ./src/index.tsx

ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'ActionSheetIOS' in '/Users/evian/projects/mycomponent/node_modules/react-native/Libraries/react-native'
 @ ./node_modules/react-native/Libraries/react-native/react-native-implementation.js 188:11-36
 @ ./src/index.tsx

ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'ActivityIndicator' in '/Users/evian/projects/mycomponent/node_modules/react-native/Libraries/react-native'
 @ ./node_modules/react-native/Libraries/react-native/react-native-implementation.js 26:11-39
 @ ./src/index.tsx

Was übersehe ich hier?