Javascript 如何创建react库的示例

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

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

"dependencies": {
  "react": "^16.8.6",
  "store": "file:../",
  "react-dom": "^16.8.6",
  "react-scripts": "3.0.1",
  "reselect": "^4.0.0"
},

当转到示例目录并运行

warn install

时，没有错误，但当我在示例目录中运行warn 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 |   );

SyntaxError:/home/me/dev/homebrew-redux/store/index.js:意外令牌（104:4）
102 |   }, []);
103 |返回(
> 104 |     
|     ^
105 |{儿童}
106 |     
107 |   );

---

我想知道如何向实际运行的store项目添加一个示例。尝试在根目录下运行

warn install

，然后在示例中运行，但它始终给我相同的错误（可能安装了多个版本的React）。

因为我的自制redux只有一个文件，我执行了以下操作：

在我的根项目（homebrew redux）中提供react作为对等依赖项，为了构建我的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"
  }
}

为了能够构建自制redux，我在根目录中添加了

.babelrc

，内容如下：

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

如果您的项目有多个文件，您可能必须安装并创建生产版本（不确定，因为我没有测试它）。确保输出转到项目根目录中的index.js，因为这是root package.json（main的值）中的入口点。如果无法生成该文件，则可以更改root package.json中的主值

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

"dependencies": {
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-scripts": "3.0.1",
  "reselect": "^4.0.0",
  "homebrew-redux": "file:../"
},

在根目录中，删除节点_modules和warn.lock并重新运行warn install

使用

warn Build

构建自制redux，它将在根目录中创建index.js。此文件的输出中不包含react，因为它是对等依赖项

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

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

"dependencies": {
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-scripts": "3.0.1",
  "reselect": "^4.0.0",
  "homebrew-redux": "file:../"
},

在示例中，移除节点_模块和warn.lock，然后重新运行

warn install

现在我可以从示例中导入自制redux，如下所示：

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

运行

纱线开始

，一切正常