如何为反应库创建示例答案

【问题标题】：How to create an example for a react library如何为反应库创建示例
【发布时间】：2023-03-18 11:19:01
【问题描述】：

在根文件夹中，我有一个 index.js 文件，其中包含一些 React 钩子和上下文。部分内容如下所示：

import React, {
  createContext,
  useContext,
  useState,
  useEffect,
} from 'react';
//other stuff
export const createStoreProvider = store => ({
  children,
}) => {
  const [state, setState] = useState(store.getState());
  useEffect(() => {
    const remove = store.subscribe(() => {
      setState(store.getState());
    });
    return () => remove();
  }, []);
  return (
    <StoreContext.Provider value={state}>
      {children}
    </StoreContext.Provider>
  );
};

根目录下有package.json

"dependencies": {
  "react": "^16.8.6"
}

在项目的根目录中有一个名为 example 的目录，其中包含一个 package.json ：

"dependencies": {
  "react": "^16.8.6",
  "store": "file:../",
  "react-dom": "^16.8.6",
  "react-scripts": "3.0.1",
  "reselect": "^4.0.0"
},

当转到示例目录并运行 yarn install 时没有错误，但是当我在示例目录中运行 yarn start 时出现编译错误：

SyntaxError: /home/me/dev/homebrew-redux/store/index.js: Unexpected token (104:4)

  102 |   }, []);
  103 |   return (
> 104 |     <StoreContext.Provider value={state}>
      |     ^
  105 |       {children}
  106 |     </StoreContext.Provider>
  107 |   );

我想知道如何将示例添加到实际运行的商店项目中。尝试在 root 中运行 yarn install，然后在示例中运行，但它一直给我同样的错误（可能安装了多个版本的 React）。

【问题讨论】：

标签： javascript reactjs yarnpkg package.json

【解决方案1】：

因为我的 homebrew-redux 只有一个文件，所以我做了以下操作：

在我的根项目 (homebrew-redux) 中提供 react 作为对等依赖项，为了构建我的 homebrew-redux，我添加了 babel，然后是一个脚本来构建它，这里是根 package.json 的相关部分：

{
  "name": "homebrew-redux",
  "main": "./index.js",
  "scripts": {
    "build": "./node_modules/.bin/babel store/index.js --out-file index.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "peerDependencies": {
    "react": "^16.8.6"
  },
  "devDependencies": {
    "@babel/cli": "^7.6.2",
    "@babel/core": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "@babel/preset-react": "^7.0.0"
  }
}

为了能够构建 homebrew-redux，我在根目录中添加了 .babelrc，内容如下：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

如果您的项目有多个文件，您可能必须安装 react-scripts 并创建一个生产版本（不确定，因为我没有测试它）。确保输出到项目根目录中的 index.js，因为这是根 package.json 中的入口点（main 的值）。如果您无法构建到该文件，那么您可以更改根 package.json 中的主要值

在根目录下删除 node_modules 和 yarn.lock 并重新运行 yarn install。

使用yarn build 构建 homebrew-redux，它将在根目录中创建一个 index.js。此文件在其输出中不包含 react，因为它是对等依赖项。

在示例目录中，我将 homebrew-redux 作为本地依赖添加到 example/package.json

"dependencies": {
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-scripts": "3.0.1",
  "reselect": "^4.0.0",
  "homebrew-redux": "file:../"
},

在示例中删除 node_modules 和 yarn.lock 并重新运行 yarn install。

现在我可以像这样从示例中导入 homebrew-redux：

import {
  compose,
  createStore,
  createStoreProvider,
  applyMiddleware,
} from 'homebrew-redux';

运行yarn start，一切正常。

【讨论】：