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

IT技术 node.js reactjs npm package publish

2021-05-06 01:38:13

我按照https://zellwk.com/blog/publish-to-npm/创建我的自定义 npm 包（https://www.npmjs.com/package/demo-to-publish）。我的自定义包的文件夹结构如下：

src -> index.js
节点module
项目清单
标签.js
包.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 后，我将其安装npm i demo-to-publish在我的新 react cra 应用程序中。我编写了以下代码来使用这个包。

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

我面临的错误在下面附加的屏幕截图中。

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

2个回答

问题

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

节点module没有错误，只是转译有问题。

使固定

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

方案一

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

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

在 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"]
        }
    ]
}

这将用于转换demo-to-publishCRA 应用程序中 node_modules 文件夹中的代码

你应该已经@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. 再次运行项目，现在应该可以正常运行了

方案二（推荐）

这种方法需要您构建 npm 包。既然你已经有了 webpack，那应该不是问题。需要在demo-to-publishrepo中完成以下步骤

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
在 repo 中运行 npm run build。它应该创建一个dist包含一个index.js文件的新文件夹
立即发布 npm 包

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

希望能帮助到你。如有任何疑问，请回复。

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

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

其它你可能感兴趣的问题

上一篇帮助将我的 Anet A8 打印机安装到我的计算机上下一篇挤出机堵塞。万豪复印机 i3 Plus