在反应中使用自制的 npm 包.编译失败 [英] Using self made npm package in react. Failed to compile

问题描述

我关注了

如何解决这个问题?帮帮我，这是我第一次发布 npm 包.

解决方案

Issue

问题在于您的代码没有被转译，因此浏览器没有正确识别，从而导致错误.默认情况下，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 种可能的修复方法可以完成，如下所列.推荐的解决方案将是第二个，但它需要您进行构建然后发布

解决方案 1

为此，您需要在 CRA 和 npm 存储库中进行一些更改.您需要在 babel 配置中添加一个配置来转译特定的节点模块.由于 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 应用中执行这些步骤

1. 创建一个文件(.js，这里比方说babel_override.js)
2. 在 babel_override.js 中添加以下代码:

module.exports = {覆盖:[{测试:[./node_modules/demo-to-publish"]，预设:[@babel/preset-react"]}]}

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

3. 你应该已经安装了 @babel/preset-react.如果没有，请安装它.

4. 在 CRA 应用中删除并重新安装演示到发布包.

5. 在运行项目之前，需要编译代码，所以在终端运行以下命令

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 覆盖配置.您应该得到类型为:Successfullycompiled 3 files with Babel.

  6. 再次运行项目，它现在应该可以正常运行

解决方案 2(推荐)

这种方法需要你构建 npm 包.既然你已经有了 webpack，那应该不是问题.需要在demo-to-publish repo

中完成以下步骤

1. 在输出中将库目标添加为 commonjs2.webpack 配置将变成这样:

module.exports = {条目:./src/index.js"，输出: {文件名:index.js"，libraryTarget: 'commonjs2'//这是最重要的一行，其他内容不变},模块: {//其他代码}};

这将用于输出 dist 文件夹中的构建.

2. 在 package.json (https://github.com/prak-mtl/demo-to-publish/blob/master/package.json)，我们需要更新主属性.将其值从 ./src/index.js 更改为 ./dist/index.js
3. 在 repo 中运行 npm run build.它应该创建一个新文件夹dist，其中包含一个index.js文件
4. 立即发布 npm 包

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

希望有帮助.如有任何疑问，请回复.

I followed https://zellwk.com/blog/publish-to-npm/ to create my custom npm package (https://www.npmjs.com/package/demo-to-publish). The folder structure of my custom package is as follows:

1. src -> index.js
2. node_modules
3. List item
4. Lable.js
5. package.json
6. webpack.config.js

Content of my package.json is as follows:

{
  "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"
  }
}

Contents of my index.js in src folder are as follows:

import React, { Component } from "react";

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

Contents of my webpack.config.js are as follows:

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

After publishing it to npm I installed it using npm i demo-to-publish in my new react cra app. I wrote the following code to use this package.

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

The error I am facing is in the screenshot attached below.

How to resolve this issue? Help me out as this is my first time publishing an npm package.

解决方案

Issue

The issue is that your code is not transpiled and so it is not properly recognised by the browser and hence errors. By default, create-react-app does not transpiles node_modules.
You can find more here in a github issue https://github.com/facebook/create-react-app/issues/3889

The node module has no errors, just transpilation is the problem.

---

Fix

After going through the repo (https://github.com/prak-mtl/demo-to-publish), there are 2 possible fixes which can be done and are listed below. Recommended solution will be 2nd one but it requires you to do the build and then publish

Solution 1

For this you need to do some changes in the both CRA and npm repo. You need to add a configuration in the babel config to transpile the specific node module. Since, CRA config is not changeable (unless you ejected the code), you need to add a additional configuration using override option.

- Do this step in the demo-to-publish repo

Inside the package.json of the npm package (i.e. https://github.com/prak-mtl/demo-to-publish/blob/master/package.json), you need to change the main path since we will be transpiling the code to new folder lib. Change it to ./lib/src/index.js and republish the package.

- Do these steps in the CRA app

1. Create a file (<any-name>.js, here let's say babel_override.js)
2. Add the following code in babel_override.js:

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

This will be used to transpile the code inside demo-to-publish in the node_modules folder in the CRA app

3. You should have @babel/preset-react installed. If not, then install it.

4. Delete and reinstall the demo-to-publish package in CRA app.

5. Before running the project, code needs to be transpiled, so run the following command in the terminal

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 can be development, test or production
• -d ./node_modules/demo-to-publish/lib will published the transpiled code inside lib folder

• --config-file is the babel override config created in step 1. You should get success result of type: Successfully compiled 3 files with Babel.

  6. Run the project agian, it should now run fine

Solution 2 (Recommended)

This approach requires you to build the npm package. Since you already have the webpack, it shouldn't be a problem. The following steps needs to be done in demo-to-publish repo

1. Add library target as commonjs2 in the output. The webpack config will become something like this:

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
  }
};

This will be used to output the build in dist folder.

2. In the package.json (https://github.com/prak-mtl/demo-to-publish/blob/master/package.json), we need to update the main attribute. Change its value from ./src/index.js to ./dist/index.js
3. Run npm run build in the repo. It should create a new folder dist containing one index.js file inside it
4. Publish the npm package now

Then, in the CRA app, install the package and run normally. It should work fine.

Hope it helps. Revert for any doubts.

这篇关于在反应中使用自制的 npm 包.编译失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！