Question

我正在尝试创建一个npm包，其中包含一个React UI和一些元素来订阅由该UI发送的事件（我正在谈论Pub / Sub，UI发布了一个json和组件因此，我的目标是导出UI和Subscriber元素（如果相关，我正在使用rxjs框架进行发布和订阅）。

尝试使用import { chatUI } from '****';导入UI时 ****是我创建的软件包。

（在npm pacakge中，我使用以下命令将这个UI导出到index.js文件中：

import Chat from './Chat';
export var chatUI = Chat;

）

我遇到以下编译错误：

./node_modules/****/####/src/Chat.js
SyntaxError: D:\container\‏‏R (3)\node_modules\****\###\src\Chat.js: Unexpected token (406:6)

  404 | 
  405 |     return (
> 406 |       <div className="chat">
      |       ^
  407 |         <h3 key={uuidv1()}>
  408 |           Title<h4>.</h4>
  409 |         </h3>

此UI本身就可以正常工作，但是从npm包导入时会产生编译错误。.我是发布npm包的新手，所以我很确定自己在这里遗漏了一些东西。

在使用npx babel src/App.js --out-file script-compiled2.js之后，根据答案建议进行

编辑：我收到以下错误消息：src/App.js: Unexpected token (9:6)。

在尝试使用babel进行编译后，在chat.js组件中发生了类似的事情，而没有html标记的文件似乎可以正常编译。.

这是App.js

import React from 'react';
import './App.css';
import Chat from './Chat';

const App = class extends React.PureComponent {
  render() {
    const { title } = this.context;
    return (
      <div className="center-screen">
        {title} <Chat />
      </div>
    );
  }
};

export default App;

Answer 1

您需要预先转换组件，然后才能将其发布到注册表中，以确保CRA可以使用该代码。一种方法是创建一个lib/文件夹，然后通过babel --out-file选项将文件转入该文件夹。然后将main文件中的package.json指向lib/而不是src/或当前文件所在的位置。

发布了新的npm软件包。安装和使用该软件包时，会发生SyntaxError：“意外令牌”

1 个答案: