Javascript 如何将React组件导出为npm包？创建React应用程序语法错误：意外标记

我已经创建了名为“create react app npm”的react应用程序。在./src/index.js文件中，我导出了组件，以便在另一个项目中使用它的npm包。首先，我在我的主根目录下运行了这段代码

npm运行弹出

，然后是我项目的下一部分

这是create-react-app-npm文件夹中的src/index.js 当我运行npm start时，我无法运行该项目。我收到了错误信息。我不知道这是什么意思。我该怎么办

错误是这样的

未能编译。
../create react app npm/src/index.js
语法错误：/home/semih/Desktop/create-react-app-npm/src/index.js:意外标记（7:15）
5 |类ExportApp扩展反应组件{
6 | render（）{
>7 |返回（）；
|                ^
8 |     }
9 | }
10 |导出默认ExportApp；

---

我希望在

npm测试

项目中运行

ExportMain

组件。我应该遵循什么路径？

创建React应用程序/CRA不是构建和捆绑npm包的最佳工具，它是创建单页应用程序。对于组件库，CRA团队可以使用

由于您已弹出CRA，您仍然可以尝试调整Webpack配置。以下是一个配置示例，其中包含针对npm包的基本设置：

// simply way to exclude all node_modules from bundle.
// You can configure entries manually, too.
const nodeExternals = require('webpack-node-externals');

module.exports = {
  ...
  output: {
    // provide entry point exports via CommonJS / as npm package
    libraryTarget: "commonjs"
  },
  ...
  // ignore built-in modules like path, fs, etc.
  target: "node",
  // don't bundle node_modules with your library
  // external packages should be required
  externals: [nodeExternals()]
};

关于CRA，将这些设置添加到基本配置

/config/webpack.config.js

。可能的进一步调整：

output: {
  // give your main npm package file a static name
  // It should be stored to build/node_bundle.js
  filename: "node_bundle.js"
},

package.json：

"main": "build/node_bundle.js"

最后，构建库并在客户端应用程序中要求它

链接：

• 网页包设置
• 网页包设置

---

该错误意味着，您的JSX尚未转换为有效的JavaScript语法。主项目中的CRA不会从节点_模块（组件库）传输JSX。为节点构建库-例如，config from，将package.json中的main字段调整为dist index.js，您就可以开始了。谢谢您的回答。然而，我的网页配置文件不同于互联网上的任何示例。我不知道如何配置它根据网站，你已经给了上面。我的网页包配置文件代码示例如下

const getStyleLoaders=（cssOptions，预处理器）=>{const loaders=[isEnvDevelopment&&require.resolve（'style-loader'）、isEnvProduction&&{loader:minicsExtractPlugin.loader，选项：shouldUserRelativeAssetPath？{publicPath:'../../'}:{}，}，

（）这是我的RealEffice APP NPM存储库链接。我想在本地创建NPM包，然后在本地计算机中导入另一个反应项目。我应该如何处理它？非常有用的答案。我用CRA创建了很长时间，它困扰了我几天。稍后考虑打包。谢谢！

Failed to compile.

../create-react-app-npm/src/index.js
SyntaxError: /home/semih/Desktop/create-react-app-npm/src/index.js: Unexpected token (7:15)

   5 | class ExportApp extends React.Component{
   6 |     render(){
>  7 |         return(<App sayHi="hello There I am creating my first npm package"/>);
     |                ^
   8 |     }
   9 | }
  10 | export default ExportApp;

// simply way to exclude all node_modules from bundle.
// You can configure entries manually, too.
const nodeExternals = require('webpack-node-externals');

module.exports = {
  ...
  output: {
    // provide entry point exports via CommonJS / as npm package
    libraryTarget: "commonjs"
  },
  ...
  // ignore built-in modules like path, fs, etc.
  target: "node",
  // don't bundle node_modules with your library
  // external packages should be required
  externals: [nodeExternals()]
};

output: {
  // give your main npm package file a static name
  // It should be stored to build/node_bundle.js
  filename: "node_bundle.js"
},

"main": "build/node_bundle.js"