logo标签列表

如何将Styled Components转译成一个NPM包？

javascriptreactjswebpackbabeljsstyled-components
4

我有一个样式化组件，希望将其打包成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 并验证是否实际上导出了一个组件。 - Pengson
2个回答
0

看起来你需要在组件文件中导入React。

import React from 'react';
我添加了导入，但似乎没有任何区别。我不明白为什么需要导入它，因为我实际上并没有在我的样式组件中使用React。导入我的样式组件包的文件肯定需要导入React，但我认为我的样式组件不需要... - Stretch0
0
你需要将这段代码放在 .babelrc 文件中：
    presets: [
      '@babel/env',
      '@babel/react',
    ],
我将我的 .babelrc 改为 .babelrc.js，并按照您的建议添加了以下格式的代码： presets: [ require('@babel/preset-env'), require('@babel/react') ] }``` 但是令人遗憾的是，我仍然收到原始错误。 - Stretch0
如果这并没有帮助，也许最好不要组装该组件，而是通过将构建委托给您的组件用户来以其原始形式发布它？ - Timofey Goncharov
请纠正我如果我错了，但是我不是已经在做那个了吗？我本质上是试图捆绑我的.style文件、所需的node_modules并忽略任何测试。组件的使用仍然需要担心其余部分。 - Stretch0
如果您的代码库和模块不是私有的，请提供 GitHub 和 NPM 的链接。 - Timofey Goncharov
抱歉如果这让人感到困惑，但是我正在尝试在发布之前构建。正如我所提到的，我不想捆绑测试文件、devDependencies等。我想为用户提供可用的样式化组件。如果您想查看，请访问以下存储库：https://gitlab.com/Stretch0/lattice - Stretch0
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接