如何为 React 库创建示例

Question

在根文件夹中，我有一个 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）。

Answer 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

在 root 中删除 node_modules 和 yarn.lock 并重新安装运行 yarn。

使用 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 一切正常。

如何为 React 库创建示例

How to create an example for a react library

javascript

reactjs

package.json

yarnpkg