上传/使用我的组件库到npmjs？ （反应+样式化的组件+故事书）

Question

有没有人提供有关如何发布和使用使用样式组件的npmjs包的指南？

如果没有，如何将我的组件库上传到npmjs？需要注意的是，我正在使用样式化组件，因此我不确定如何配置babel来使用它。 我已遵循本指南：https://styled-components.com/docs/faqs#i-am-a-library-author-should-i-bundle-styledcomponents-with-my-library 但是当我尝试使用我的软件包时，我发现我的项目没有导出my-component.js。

到目前为止，这是我的工作：

index.js

import Button from './components/button/Button'
import Container from './components/container/Container'
import Grid from './components/grid/Grid'
import Heading from './components/heading/Heading'
import Image from './components/image/Image'
import Select from './components/select[WIP]/Select'
import Stack from './components/stack/Stack'
import Text from './components/text/Text'
import TextLink from './components/textLink/TextLink'
import ZIndex from './components/zIndex/ZIndex'

export {
  Button,
  Container,
  Grid,
  Heading,
  Image,
  Select,
  Stack,
  Text,
  TextLink,
  ZIndex,
}

package.json

{
  "name": "yaytrade",
  "version": "0.1.16",
  "license": "ISC",
  "source": "src/index.js",
  "main": "build/index.js",
  "module": "build/index.module.js",
  "unpkg": "build/index.umd.js",
  "scripts": {
    "build": "microbundle",
    "build-storybook": "build-storybook -c .storybook -o .storybook-build",
    "start-storybook": "start-storybook -s ./public -p 6006",
    "lint": "eslint --fix .",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
    "test": "jest --config ./jest.config.json",
    "test:watch": "npm run test -- --watch",
    "chromatic": "npx chromatic --project-token=c5q00gcvr6d"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "babel-plugin-idx": "^2.4.0",
    "idx": "^2.5.6",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "stylelint-config-standard": "^20.0.0",
    "uniqid": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@storybook/addon-a11y": "^6.0.21",
    "@storybook/addon-console": "^1.2.1",
    "@storybook/addon-essentials": "^6.0.21",
    "@storybook/addon-links": "^6.0.21",
    "@storybook/addons": "^6.0.21",
    "@storybook/react": "^6.0.21",
    "babel-eslint": "^10.1.0",
    "babel-plugin-react-require": "^3.1.3",
    "babel-plugin-root-import": "^6.5.0",
    "babel-plugin-styled-components": "^1.11.1",
    "babel-register": "^6.26.0",
    "chromatic": "^5.1.0",
    "copy-webpack-plugin": "^6.1.0",
    "eslint": "^7.8.1",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.0",
    "eslint-plugin-simple-import-sort": "^5.0.3",
    "jest": "^26.4.2",
    "lint-staged": "^10.3.0",
    "microbundle": "^0.12.3",
    "prettier": "^2.1.1",
    "styled-components": ">= 5"
  },
  "peerDependencies": {
    "styled-components": ">= 5"
  },
  "lint-staged": {
    "./src/**/*.{js,jsx,json,scss}": [
      "npx prettier --write -c .prettierrc",
      "git add"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

.babelrc

{
  "plugins": [
    "babel-plugin-styled-components",
    "react-require",
    [
      "babel-plugin-root-import",
      {
        "paths": [
          {
            "rootPathPrefix": "~",
            "rootPathSuffix": ""
          }
        ]
      }
    ]
  ],
  "presets": ["@babel/preset-env"]
}