Javascript 如何将样式化组件传输到NPM包中？

我有一个样式化的组件，我想将其构建到NPM包中，并能够导入到其他项目中

我的样式化组件如下所示：

// src/StyledDiv.styles.js
import styled from "styled-components"

const StyledDiv = styled("div")`
  border: solid red 1px;
  border-radius: 5px;
  padding: 20px;
  margin: 15px;
`

export default StyledDiv

然后，我有一个构建脚本，可以将代码传输到dist文件夹：

“build”：“babel src-d dist——复制文件——忽略”。/src/***.test.js'，

然后，我在我的样式化组件项目中运行

npm link

，然后在另一个项目中运行

npm link

，以尝试导入它，但似乎出现了错误：

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

我相信来自babel的消息没有正确传输我的样式化组件，所以当我在dist中导入构建的文件时，应用程序崩溃了

我的完整package.json如下所示：

{
  "name": "my-styled-component",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "test": "jest ./src/**/*.test.js --notify --detectOpenHandles",
    "test:watch": "jest ./src/**/*.test.js --notify --watch",
    "start": "webpack-dev-server --mode development",
    "build": "babel src -d dist --copy-files --ignore './src/**/*.test.js'",
    "lint:css": "stylelint './src/**/*.styles.js'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-jest": "^24.8.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.8.0",
    "jest-styled-components": "^6.3.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-test-renderer": "^16.8.6",
    "style-loader": "^0.23.1",
    "stylelint": "^10.0.1",
    "stylelint-config-recommended": "^2.2.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.6.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "styled-components": "^4.2.0",
    "styled-tools": "^1.7.1"
  }
}

---

看起来您需要在组件文件中导入react

import React from 'react';

---

您需要在

中使用此选项。babelrc

：

    presets: [
      '@babel/env',
      '@babel/react',
    ],

---

我添加了导入，但似乎没有任何区别。我不明白为什么我需要导入它，因为我没有在我的样式化组件中实际使用React。导入我的样式化组件包的文件肯定需要导入React，但我没有想到我的样式化组件会…我将我的

.babelrc

更改为

.babelrc.js

，并将您的建议添加为

module.exports={presets:[require（'@babel/preset env'），require（'@babel/React'）]}

因为您发布的格式似乎不起作用。不幸的是，我仍然得到了原始错误如果这没有帮助，也许不组装组件是有意义的，但是通过将构建委托给组件的用户以其原始形式发布组件？如果我错了，请纠正我，但我还没有这样做吗？我实际上是在尝试捆绑我的

.style

文件、所需的节点模块，并忽略任何测试。组件的使用仍然需要考虑其他问题。我以为您在发布之前正试图通过Babel构建组件。如果不是这样，那么只需在

包.json

中添加

“main”：“PATH/NAME-YOUR-COMPONENT”

，而不是

“main”：“dist/index.js”

。如果您的存储库和模块不是私有的，请提供指向github和npm的链接。似乎所需组件没有按预期成功导出。请检查/dist/index.js并验证是否确实存在导出的组件。

    presets: [
      '@babel/env',
      '@babel/react',
    ],