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

Posted 2023-02-22

【中文标题】在 react 中使用自制的 npm 包。编译失败

【英文标题】：Using self made npm package in react. Failed to compile

【发布时间】：2020-05-21 10:44:33

【问题描述】：

我跟随 https://zellwk.com/blog/publish-to-npm/ 创建了我的自定义 npm 包 (https://www.npmjs.com/package/demo-to-publish)。 我的自定义包的文件夹结构如下：

src -> index.js node_modules 列表项 标签.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"
  

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

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 包。

【问题讨论】：

亲爱的 Prakhar，我认为您在返回时错误地使用了 ``` ``` 括号。只有渲染应该在括号中。

@izk 你是不是这个意思render() <div> <button>Click me</button> </div>

render () return <div> <button>Click me</button> </div> ;

@izk 抱歉，这并没有解决我的问题。如果将it(Button.js)作为普通组件使用，代码没有错误。发布后，它开始抛出错误。

【参考方案1】：

问题

问题是 your code is not transpiled 并没有被浏览器正确识别，因此出现错误。默认情况下，create-react-app 不会转译 node_modules。 您可以在 github 问题中找到更多信息 https://github.com/facebook/create-react-app/issues/3889

node模块没有错误，只是转译有问题。

---

修复

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

解决方案 1

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

- 在 demo-to-publish repo 中执行此步骤

在 npm 包（即https://github.com/prak-mtl/demo-to-publish/blob/master/package.json）的 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 应用中删除并重新安装 demo-to-publish 包。

在运行项目之前，需要对代码进行转译，所以在终端运行如下命令

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. 的成功结果

再次运行项目，现在应该可以正常运行了

解决方案 2（推荐）

这种方法需要您构建 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）中，我们需要更新main属性。将其值从 ./src/index.js 更改为 ./dist/index.js 在存储库中运行 npm run build。它应该创建一个新文件夹 dist，其中包含一个 index.js 文件 立即发布 npm 包

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

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

【讨论】：

我一直坚持到第 3 步，但卡在第 4 步，这是我的仓库的链接 github.com/prak-mtl/demo-to-publish 请检查。

我的坏@PrakharMittal 我应该正确地提到这些步骤。我已经用正确的步骤更新了答案。

非常感谢您的帮助。现在，它正在工作。另外，我们必须编写npx babel ./node_modules/.bin/babel ./node_modules/demo-to-publish -d ./node_modules/demo-to-publish/lib --config-file ./babel_override.js 命令来编译。

npx babel 仅当您还没有 babel 节点模块时才需要。否则，它应该可以在没有 npx 命令的情况下正常工作。

我的 CSS 和图像在使用上述命令后没有被转译/可用。如何做到这一点？

【参考方案2】：

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

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

【讨论】：

感谢您的输入，但我不认为该错误是因为该组件是基于类的组件。

你是在使用 babel 和 webpack 打包成包吗？这个link 可能对你有用，因为你正在处理 React 组件库。

我按照我阅读的文档中给出的相同步骤进行操作。我没有使用过 babel 或 webpack。我不想通过构建而是使用整个源代码来发布它。你能指导我如何做到这一点吗？