准备和发布Typescript / ES6 React-Native组件作为npm软件包的正确步骤是什么?

时间:2019-03-02 22:25:52

标签: reactjs typescript react-native webpack babeljs

我有一个非常简单的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;

webpack

我希望我的代码以Typescript编写。我将使用Typescript首先将代码从ES6转换为ES6,然后从ES5转换为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/**/*" ] }

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

yarn install

当我先运行yarn 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 时,出现以下错误:

yarn add react react-native

为什么会出现这些错误? 然后,如果我yarn run 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 ,我将收到大量以下类型的错误:

{{1}}

我在这里想念什么?

0 个答案:

没有答案