Question

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

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，然后在示例中运行，但它总是给我同样的错误（可能安装了多个版本的React）。

Answer 1

由于我的自制软件Redux只有一个文件，因此我执行了以下操作：

在我的根项目（homebrew-redux）中提供对等依赖性，并构建我的homebrew-redux，我添加了babel，然后是一个脚本来构建它，这是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"
  }
}

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

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

如果您的项目有多个文件，则可能必须安装react-scripts并创建一个生产版本（不确定，因为我没有对其进行测试）。确保输出到项目根目录中的index.js，因为这是根package.json（main的值）中的入口点。如果无法生成该文件，则可以更改根包中的主要值。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，一切正常。

如何为React库创建示例

1 个答案: