React组件库NPM包中的多组件默认导出问题
我创建了一个React组件库(有一个组件)并将其发布到NPM,它工作正常。但问题是,当我试图添加另一个组件时,我面临着如何通过主index.js文件导出多个组件的问题,该文件是我的库的入口点,似乎我只能导出一个组件或函数作为默认值,如果不是默认值导出,导出就不起作用。我真的不知道如何解决这个问题。我想默认导出多个组件。
This is my folder structure. I would like some help on that here
import Button from "./components/Button";
import Pagination from "./components/Pagination";
export default {Button, Pagination}
这是我的主index.js文件,这不起作用。我也试过这个
import Button from "./components/Button";
import Pagination from "./components/Pagination";
module.exports= {
Button: Button,
Pagination: Pagination
}
I'm getting this error
我甚至试过这样做
export {default as Button} from './components/Button';
export {default as Pagination} from './components/Pagination';
我得到相同的导出默认错误。请有人帮助我。
package.json
{
"name": "exampledemo3",
"version": "1.0.0",
"description": "Made with create-react-library",
"license": "MIT",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^18.2.0"
},
"devDependencies": {
"microbundle-crl": "^0.13.10",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^3.4.1"
},
"files": [
"dist"
]
}
.eslintrc
{
"parser": "babel-eslint",
"extends": [
"standard",
"standard-react",
"plugin:prettier/recommended",
"prettier/standard",
"prettier/react"
],
"env": {
"node": true
},
"parserOptions": {
"ecmaVersion": 2020,
"ecmaFeatures": {
"legacyDecorators": true,
"jsx": true
}
},
"settings": {
"react": {
"version": "16"
}
},
"rules": {
"space-before-function-paren": 0,
"react/prop-types": 0,
"react/jsx-handler-names": 0,
"react/jsx-fragments": 0,
"react/no-unused-prop-types": 0,
"import/export": 0
}
}
1条答案
按热度按时间nhaq1z211#
尝试像这样导出默认函数:
默认功能
导出函数时不应该使用
{}
。