如何为react库创建示例

IT技术 javascript reactjs yarnpkg package.json
2021-05-22 05:13:05

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

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

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 install。

使用它构建 homebrew-reduxyarn build将在根目录中创建一个 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-custom-scrollbars 的光标样式？ 下一篇如何在 heroku 服务器上启用 POST 方法（用于 React 应用程序）？我得到 405 方法不允许