我有一个非常简单的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}}
我在这里想念什么?