如何为React库创建示例 [英] How to create an example for a react library

问题描述

在根文件夹中，我有一个带有一些React钩子和上下文的index.js文件.其中一些内容如下所示:

In the root folder I have an index.js file with some React hooks and context. Some of the content looks like this:

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

In the root directory there is package.json

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

项目的根目录中是一个名为example的目录，该目录具有package.json，其中包含:

In the root directory of the project is a directory called example that has a package.json with:

"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时，出现编译错误:

When go to the example directory and run yarn install there are no errors but when I run yarn start in the example directory I get a compile error:

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

我想知道如何为实际运行的商店项目添加示例.试图先在根目录中运行yarn install，然后在示例中运行，但是它总是给我同样的错误(可能安装了多个版本的React).

I was wondering how I could add an example to the store project that will actually run. Tried to run yarn install in root and then in example but it keeps giving me the same error (possibly multiple versions of React are installed).

推荐答案

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

Because my homebrew-redux has only one file I did the following:

在我的根项目(homebrew-redux)中作为对等依赖项进行响应，并构建我的homebrew-redux，我添加了babel，然后是一个脚本来构建它，这是root package.json的相关部分:

Provide react as a peer dependency in my root project (homebrew-redux) and to build my homebrew-redux I added babel, then a script to build it, here are the relevant parts of root 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"
  }
}

为了能够构建自制的redux，我在根目录中添加了.babelrc，其内容如下:

To be able to build homebrew-redux I added .babelrc to the root with the following content:

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

如果您的项目有多个文件，则可能必须安装反应脚本和创建一个生产版本(不确定，因为我没有对其进行测试).确保输出到项目根目录中的index.js，因为这是根package.json(main的值)中的入口点.如果无法生成该文件，则可以更改根包中的主要值.json

If your project has multiple files you may have to install react-scripts and create a production build (not sure because i didn't test it). Make sure output goes to index.js in the project root because that's the entry point in the root package.json (value for main). If you can't build to that file then you can change the main value in the root package.json

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

In the root delete node_modules and yarn.lock and re run yarn install.

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

Build homebrew-redux with yarn build that will create an index.js in the root directory. This file does not contain react in it's output because it's a peer dependency.

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

In the example directory I added homebrew-redux as a local dependency to the 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.

In example remove node_modules and yarn.lock and re run yarn install.

现在我可以从示例中导入homebrew-redux了，

Now I can import homebrew-redux from the example like so:

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

Ran yarn start一切正常.

这篇关于如何为React库创建示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！