如何将样式化的组件转换为 NPM 包？答案

【问题标题】：How to transpile styled components into an NPM package?如何将样式化的组件转换为 NPM 包？
【发布时间】：2019-09-26 08:07:18
【问题描述】：

我有一个样式组件，我想将它构建到 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 --copy-files --ignore './src/**/*.test.js'",

// .babelrc
{
  "presets": ["env", "react"]
}

然后我在我的样式组件项目中运行npm link，然后在我的另一个项目中运行npm link <styled component>，以便尝试导入它，但似乎得到了错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我认为 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"
  }
}

【问题讨论】：

似乎所需的组件没有按预期成功导出。请去检查 /dist/index.js 并验证是否确实有一个组件被导出。

标签： javascript reactjs webpack babeljs styled-components

【解决方案1】：

你需要在.babelrc使用这个：

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

【讨论】：

我将.babelrc 更改为.babelrc.js 并将您的建议添加为module.exports = { presets: [ require('@babel/preset-env'), require('@babel/react') ] }，因为您发布的格式似乎不起作用。不幸的是，我仍然收到原点错误
如果这没有帮助，也许根本不组装组件而是通过将构建委托给组件的用户以原始形式发布它是有意义的？
如果我错了，请纠正我，但我还没有这样做吗？我实际上是在尝试捆绑我的 .style 文件、所需的 node_modules 并忽略任何测试。组件的使用还是要操心其余的。
我以为您在发布之前尝试通过 Babel 构建组件。如果不是这种情况，那么只需在您的package.json 中添加"main": "PATH/NAME-YOUR-COMPONENT" 而不是"main": "dist/index.js"。
如果您的存储库和模块不是私有的，请提供指向 github 和 npm 的链接。

【解决方案2】：

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

import React from 'react';

【讨论】：

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