在我的情况下，为什么我会在“npm start”上收到 no-unused-expressions 错误

Question

我正在学习创建 NPM 库并发布到 NPM。我关注了this tutorial。

这是一个 Codesandbox 可以正常工作，但无法在那里测试 npm 链接。

它正在工作 - 我可以像这样使用我发布到 NPM 的 npm 包：

import returnLibrary from "react-library-test";

但是当我使用npm link 来调试我的 react-library-test 的本地副本时，它拒绝编译我认为这是某种形式的严格模式，因为我明白了：

很难看出错误是因为“第 11:261 行：预期分配......”。当我进入 index.cjs.js 时，它在第 11:261 行看起来像这样：

还有为什么关于开发文件夹文件的错误消息嗯...我已经链接了库看这里;

我在寻找答案，对此有很多类似的答案，但对我没有任何帮助。

这个库很简单：

index.js

import AwesomeButton from  './button.jsx'

const returnLibrary = () => {
    return {
        AwesomeButton: AwesomeButton
        // you can add ere oter components tat you want to export
    }
}
export default returnLibrary();

button.jsx

import React, { useState, useEffect } from "react";
import "./button.css";

const AwesomeButton = (props) => {
  const [color, setColor] = useState(null);
  useEffect(() => {
    if (props.variant) {
      if (props.variant === "primary") {
        setColor("#0077ff");
      } else if (props.variant === "secondary") {
        setColor("#ff0062");
      } else if (props.variant === "success") {
        setColor("#0f8000");
      } else {
        setColor("#949393");
      }
    }
  }, [props.variant]);
  const { children } = props;

  return (
    <button
      className="buttonComponent"
      style={{
        backgroundColor: color,
      }}
    >
      {children.toUpperCase()}
    </button>
  );
};

export default AwesomeButton;

我在完成“npm link react-library-test”之后就这样使用它（这很奇怪，因为它在不链接时有效）：

import logo from "./logo.svg";
import "./App.css";
// import returnLibrary from "./react-library/src/index";
import returnLibrary from "react-library-test";

function App() {
  const { AwesomeButton } = returnLibrary;
  return (
    <div className="App">
      <AwesomeButton variant="secondary">sdsadda</AwesomeButton>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React 
        </a>
      </header>
    </div>
  );
}

export default App;

package.json

{
    "name": "react-library-test",
    "version": "2.0.0",
    "description": "your description",
    "main": "dist/index.cjs.js",
    "scripts": {
        "build": "rollup -c"
    },
    "peerDependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1"
    },
    "dependencies": {
        "@babel/runtime": "^7.12.5"
    },
    "keywords": [
        "react",
        "keywords"
    ],
    "author": "Hans Erik Hellberg",
    "license": "MIT",
    "devDependencies": {
        "@babel/cli": "^7.12.10",
        "@babel/core": "^7.12.10",
        "@babel/plugin-transform-runtime": "^7.12.10",
        "@babel/preset-env": "^7.12.11",
        "@babel/preset-react": "^7.12.10",
        "@rollup/plugin-babel": "^5.2.2",
        "rollup-plugin-sourcemaps": "^0.6.3",
        "rollup-plugin-styles": "^3.12.2",
        "rollup-plugin-visualizer": "^5.5.2"
    }
}

汇总配置

import styles from "rollup-plugin-styles";
import { terser } from "rollup-plugin-terser";
import babel from "@rollup/plugin-babel";
const autoprefixer = require("autoprefixer");

// the entry point for the library
const input = "src/index.js";

//
var MODE = [
  {
    fomart: "cjs",
  },
  {
    fomart: "esm",
  },
  {
    fomart: "umd",
  },
];

var config = [];

MODE.map((m) => {
  var conf = {
    input: input,
    output: {
      // then name of your package
      name: "react-awesome-buttons",
      file: `dist/index.${m.fomart}.js`,
      format: m.fomart,
      exports: "auto",
    },
    // this externelizes react to prevent rollup from compiling it
    external: ["react", 'react-dom', /@babel\/runtime/],
    plugins: [
      // these are babel comfigurations
      babel({
        exclude: "node_modules/**",
        plugins: ["@babel/transform-runtime"],
        babelHelpers: "runtime",
      }),
      // this adds sourcemaps
      // sourcemaps(),
      // this adds support for styles
      styles({
        postcss: {
          plugins: [autoprefixer()],
        },
      }),
    ],
  };
  config.push(conf);
});

export default [...config];

测试 npm 链接是否生效：

Answer 1

我通过阅读 the docs 修复了它。

当您使用 npm link 或等效项时，也会出现此问题。在这种情况下，你的打包器可能会“看到”两个 React——一个在应用程序文件夹中，一个在你的库文件夹中。假设 myapp 和 mylib 是同级文件夹，一种可能的解决方法是从 mylib 运行 npm link ../myapp/node_modules/react。这应该使库使用应用程序的 React 副本。

第一个错误：

是不是在 package.json 中我没有将“main”更改为 src 文件夹。只需这样做，npm 链接到对等应用程序 node_folders React 就解决了这个问题。

（只是不要忘记在 lib 的“npm run build”之后将 package.json “main”更改回 src 文件夹。