#reactjs #typescript #npm #react-hooks #react-component
#reactjs #typescript #npm #реагирующие перехваты #реагирующий компонент
Вопрос:
Я относительно новичок в разработке библиотеки NPM, и у меня возникли небольшие проблемы с использованием библиотеки.
Что я пытаюсь сделать, так это экспортировать перехват React и компонент React. Хук и компонент хорошо работают, когда я определяю и использую их в своем приложении, однако их экспорт приводит к проблемам, упомянутым ниже.
Вот мой package.json
...
"scripts": {
"build": "webpack",
},
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.5",
"@babel/preset-typescript": "^7.12.1",
"@types/node": "^8.0.14",
"@types/react": "^16.9.56",
"@types/react-dom": "^16.9.9",
"babel": "^6.23.0",
"babel-loader": "^8.2.1",
"css-loader": "^5.0.1",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"sass-loader": "^10.0.5",
"style-loader": "^2.0.0",
"ts-loader": "^8.0.11",
"typescript": "^4.0.5",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1",
}
Вот мой файл ввода:
// index.ts
export { useCustomHook } from './hooks/customHook'
export { default as CustomComponent } from './components/CustomComponent'
Вот мой webpack.config.js
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'index.ts'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js'
},
module: {
rules: [
{
test: /.tsx?$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
}
}
Вопросы / проблемы
- Когда я импортирую и использую свой
useCustomHook
, я получаюTypeError: Object is not a function or its return value is not iterable
. Как я могу этого избежать? - Могу ли я избежать использования
react
иreact-dom
какdevDependencies
, поскольку они у меня уже есть вpeerDependencies
Ответ №1:
Итак, я понял это: самое простое решение — отказаться webpack
и использовать rollup
вместо этого. Тогда все довольно просто.