How to create an example for a react library

问题

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

In the root directory there is package.json

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

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"
},

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

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

回答1:

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

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"
  }
}

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

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

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

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

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.

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:../"
},

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

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

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

Ran yarn start and everything works.

来源：https://stackoverflow.com/questions/57925723/how-to-create-an-example-for-a-react-library

标签

javascript

reactjs

yarnpkg

package.json