Reactjs 准备和发布Typescript/ES6 React本机组件作为npm包的正确步骤是什么？

我有一个非常简单的

react native

组件，我想发布到

npm

，以便其他应用程序可以使用它，下面是

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;

和

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"
  ]
}

和

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

当我运行

warn install

然后运行

warn run build

时，会出现以下错误：

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

为什么会出现这些错误？ 如果我随后

warn add react react native

（也就是说，我实际上在我的项目中安装了这些库，而不是简单地将它们作为对等依赖项），并且

warn再次运行build

，我会收到大量以下类型的错误：

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

---

我在这里遗漏了什么？

我意识到的第一件事是我应该向我的

webpack.config.js

添加

externals

，添加react和react本地键。然而，这并不能解决巴别塔助手的问题。我意识到巴贝尔的东西是暂时的，也就是说，这只是一个可能与依赖项版本控制有关的错误。但是我想知道发布RN组件的一般步骤是什么，这是这个问题的重点。这是我个人typescript/react项目中的配置，它编译成一个commonjs包以导入

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