反应| Npm软件包-如何导出2个组件用作npm软件包

时间:2019-04-18 19:19:09

标签: javascript node.js reactjs npm package

所以这可能是一个愚蠢的问题,但现在让我烦恼了一段时间。

使用React,我创建了两个组件(Buttons.js和Message.js),每个都有一个导出。但是,现在我希望将这两个组件都用作npm软件包。我已经使用示例成功地测试了组件,然后发布了npm包。但是,既然我现在尝试使用导入和渲染组件,我偶然发现了一个错误。

问:我如何导出2个组件用作npm软件包

这是我的方法:

我的包裹

Buttons.js

import React from "react";
import "./Buttons.css";

export const Button = ({ text }) => <div className="button">{text}</div>

Message.js

import React from 'react';
import "./Message.css";

export const Message = ({ type, message }) => <div className={["messageBox", type].join(" ")}>{message}</div>

index.js

export { default as Buttons } from "./Buttons";
export { default as Message } from "./Message";

Package.json

{
   "name": "ui-elements",
   "version": "1.0.0",
   "description": "Just a test",
   "main": "dist/index.js"
...
}

我的项目

import Message from "ui-elements";
import Button from "ui-elements";

export default class App extends Component  {
    render () {
        return (
            <React.Fragment>
                <Button text="Log in"  />
                <Message type="error" message="Error, awesome..." />
            </React.Fragment>
        )
    }
}

错误消息

  

元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记了从定义文件中导出组件,或者可能混淆了默认导入和命名导入。

1 个答案:

答案 0 :(得分:1)

在index.js中尝试一下:

import Buttons from "./Buttons";
import Message from "./Message";

export {
  Buttons,
  Message
}

但是我认为ES6模块仍在node.js中处于试验阶段,因此可能必须将其重写为旧的module.exports版本:

const Buttons = require("./Buttons"); // and rewrite in Buttons.js
const Message = require("./Message"); // and rewrite in Message.js
module.exports = { 
  Buttons, 
  Message 
};