在 React 中使用自制的 npm 包。编译失败

Question

我关注了 https://zellwk.com/blog/publish-to-npm/ to create my custom npm package (https://www.npmjs.com/package/demo-to-publish)。我的自定义包的文件夹结构如下：

src -> index.js
node_modules
列表项
Lable.js
package.json
webpack.config.js

我的package.json内容如下：

{
  "name": "demo-to-publish",
  "version": "1.0.5",
  "description": "testing publishing to npm",
  "main": "./src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "react": "^16.12.0"
  }
}

我的index.js在src文件夹中的内容如下：

import React, { Component } from "react";

export default class Button extends Component {
  render() {
    return (
      <div>
        <button>Click me</button>
      </div>
    );
  }
}

我的webpack.config.js内容如下：

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.js$|jsx/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env","@babel/preset-react"]
          }
        }
      }
    ]
  }
};

将其发布到 npm 后，我在我的新 React cra 应用程序中使用 npm i demo-to-publish 安装了它。我写了下面的代码来使用这个包。

import Button from "demo-to-publish";
<Button/>

我遇到的错误在下面的屏幕截图中。

如何解决这个问题？帮助我，因为这是我第一次发布 npm 包。

Answer 1

如果您的 class 组件没有任何状态，建议只使用功能组件。

import React from "react"
export default const Button = () => (
  <div>
    <button>Click me</button>
  </div>
)

Answer 2

问题

问题是 your code is not transpiled，因此浏览器无法正确识别，因此会出现错误。默认情况下，create-react-app 不会转译 node_modules.
您可以在 github 问题 https://github.com/facebook/create-react-app/issues/3889

中找到更多信息

节点模块没有错误，只是转译的问题。

修复

通过 repo (https://github.com/prak-mtl/demo-to-publish) 后，有 2 个可能的修复可以完成，如下所列。 推荐的解决方案是第 2 个，但它需要您进行构建然后发布

解决方案 1

为此，您需要对 CRA 和 npm 存储库进行一些更改。您需要在babel config中添加一个配置来转译特定的节点模块。由于 CRA 配置不可更改（除非您弹出代码），您需要使用 override 选项添加额外的配置。

- 在演示到发布存储库中执行此步骤

在 npm 包的 package.json 中（即 https://github.com/prak-mtl/demo-to-publish/blob/master/package.json），您需要更改主路径，因为我们会将代码转换为新文件夹 lib。将其更改为 ./lib/src/index.js 并重新发布包。

- 在 CRA 应用程序中执行这些步骤

创建文件（<any-name>.js，此处假设babel_override.js）
在babel_override.js中添加如下代码：

module.exports = {
    overrides: [
        {
            test: ["./node_modules/demo-to-publish"],
            presets: ["@babel/preset-react"]
        }
    ]
}

这将用于转译 CRA 应用程序 node_modules 文件夹中 demo-to-publish 内的代码

您应该安装了 @babel/preset-react。如果没有，那就安装它。
删除并重新安装 CRA 应用程序中的演示到发布包。
在项目运行之前，需要转译代码，所以运行在终端中输入以下命令

NODE_ENV=development ./node_modules/.bin/babel ./node_modules/demo-to-publish -d ./node_modules/demo-to-publish/lib --config-file ./babel_override.js

`NODE_ENV 可以是开发、测试或生产
-d ./node_modules/demo-to-publish/lib 将发布 lib 文件夹中的转译代码
--config-file 是在步骤 1 中创建的 babel 覆盖配置。您应该获得类型的成功结果：Successfully compiled 3 files with Babel.
1. 运行 agian 项目，现在应该运行没问题

方案二（推荐）

此方法需要您构建 npm 包。既然你已经有了 webpack，那应该不是问题。以下步骤需要在 demo-to-publish repo

中完成

在输出中将库目标添加为 commonjs2。 webpack 配置会变成这样：

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    libraryTarget: 'commonjs2' //This one the most important line, others things will remain same
  },
  module: {
    //Other code
  }
};

这将用于在 dist 文件夹中输出构建。

在package.json（https://github.com/prak-mtl/demo-to-publish/blob/master/package.json）中，我们需要更新主要属性。将其值从 ./src/index.js 更改为 ./dist/index.js
运行 npm 运行在回购中构建。它应该创建一个新文件夹dist，其中包含一个index.js文件
现在发布 npm 包

然后，在CRA应用程序中，正常安装软件包和运行。它应该可以正常工作。

希望对您有所帮助。如有任何疑问，请回复。

在 React 中使用自制的 npm 包。编译失败

Using self made npm package in react. Failed to compile

publish

package

node.js

npm

reactjs

问题

修复

解决方案 1

- 在演示到发布存储库中执行此步骤

- 在 CRA 应用程序中执行这些步骤

方案二（推荐）