为什么在我的案例中 "npm start" 出现 no-unused-expressions 错误

Question

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

这是一个工作正常但无法测试 npm link 的 Codesandbox。

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

import returnLibrary from "react-library-test";

但是当我 npm link 调试 react-library-test 的本地副本时，它拒绝编译我认为这是某种形式的严格模式，因为我得到这个：

很难看出错误是因为“第 11:261 行：需要一个赋值......”。当我进入 index.cjs.js 行时，它看起来像这样 11:261:

还有为什么关于 dev 文件夹文件的错误消息嗯...我已经link编辑了库看这里；

我正在寻找答案，有很多类似的答案，但对我来说没有任何用处。

这个库很简单：

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”后像这样使用它（这很奇怪，因为它在不 linking 时工作）：

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 link 是否受到影响：

Answer 1

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

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

第一个错误：

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

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

为什么在我的案例中 "npm start" 出现 no-unused-expressions 错误

Why did I get the no-unused-expressions error on "npm start" here in my case

publish

lint

node.js

npm

reactjs