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?