Babel.js React组件库中的多组件默认导出问题

ep6jt1vc  于 2023-04-27  发布在  Babel
关注(0)|答案(1)|浏览(140)

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
  }
}
nhaq1z21

nhaq1z211#

尝试像这样导出默认函数:

默认功能

import Button from "./components/Button";
import Pagination from "./components/Pagination";

export default Button, Pagination

导出函数时不应该使用{}

相关问题