【问题标题】:Issue with publishing to npm发布到 npm 的问题
【发布时间】:2017-09-23 08:59:41
【问题描述】:

所以我正在尝试使用 react 构建一个开源项目并将其推送到 npm。问题是,我的组件,虽然它们在测试环境中运行良好 - 安装到其他组件,但是当我将它发布到 npm 并下载包并尝试访问它时,它给了我一个错误。

这里是一小段代码

import React, {Component} from 'react';
import {Nav, NavBar, NavLink, NavItem} from 'react-bootstrap';


class GitNav extends Component{
    handleSelect(eventKey){
      window.location = this.props.NavURLs[eventKey];
    }
  render(props){
    const NavTextItems = this.props.NavTexts.map((eachNav, key) =>
      <NavItem eventKey={key} href="#">{eachNav}</NavItem>
      );
    return(
      <Navbar fixedBottom collapseOnSelect>
          <Navbar.Header>
            <Navbar.Toggle />
          </Navbar.Header>
            <Navbar.Collapse>
              <Nav onSelect={this.handleSelect.bind(this)}>
                {NavTextItems}
              </Nav>
            </Navbar.Collapse>
          </Navbar>
    );
  }
}

export default GitNav;

这是错误:

Error in ./~/react-github-nav/index.js
Module parse failed: /Users/theawesomeguy/Desktop/Projects/resume3/resume/node_modules/react-github-nav/index.js Unexpected token (11:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (11:6)
 @ ./src/App.js 20:22-49

如果有人能帮我解决这个问题,那就太好了。提前致谢!

【问题讨论】:

  • 你的 package.json 和 webpack 文件是什么样的?
  • 我没有这些。问题是,我正在开发它并通过 create-react-app 对其进行测试。可能应该提到这一点。我查看了@thinhvo0108 的答案,我认为这是要走的路。不过感谢您的帮助。这些都是值得考虑的好点。

标签: reactjs npm ecmascript-6 create-react-app npm-publish


【解决方案1】:

为了将 React 库推送到 NPM,您可能需要一些样板来为您安装和转换许多东西。

=====

我还成功将几个 react 库推送到 NPM 中:

https://www.npmjs.com/~thinhvo0108

https://www.npmjs.com/package/react-sticky-dynamic-header

https://www.npmjs.com/package/react-ringing-bell

=====

您的 github 存储库的文件夹结构也应该类似于我的:

https://github.com/thinhvo0108/react-sticky-dynamic-header

https://github.com/thinhvo0108/react-ringing-bell

=====

以下有用的教程:

(样板源)https://github.com/juliancwirko/react-npm-boilerplate

(作者文章)http://julian.io/creating-react-npm-packages-with-es2015/

【讨论】:

  • 这很有帮助。感谢您的帮助!
猜你喜欢
  • 2020-01-10
  • 2019-03-01
  • 1970-01-01
  • 1970-01-01
  • 2019-06-13
  • 1970-01-01
  • 2022-11-11
  • 2016-06-14
  • 2021-02-27
相关资源
最近更新 更多