构建的故事书和生产的不同依赖项

Question

我在一个内部反应组件库工作，该库还配有一本故事书来呈现所有不同的元素。

问题是，当我想使用 Storybook 时，我需要将 React 作为我的依赖项（或 devDependencies）

但是构建包 react 不必出现在任何依赖项中，而只出现在 peerDependencies 中。

（向 devDependencies 或依赖项添加反应会在使用组件库时产生“多个反应实例”错误 - 显然，在构建的 node_modules 中）

我不确定在这种情况下，根据我要使用的构建脚本命令动态生成 package.json 是否是正确的方法，或者是否有更好的方法。

这适用于yarn storybook和yarn build-storybook但使用我的yarn build_pkg会导致多个反应实例。

{
  "name": "library",
  "version": "0.1.0",
  "description": "Component Library",
  "main": "lib/index.js",
  "license": "MIT",
  "module": "lib/index.js",
  "types": "lib/index.d.ts",
  "files": [
    "lib/**/*"
  ],
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build_pkg": "rm -rf ./lib && tsc --project ./tsconfig.json",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "storybook-docs": "start-storybook --docs --no-manager-cache"
  },
  "devDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    ...
  },
  "peerDependencies": {
    "@material-ui/lab": "4.0.0-alpha.47",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "resolutions": {
    "babel-loader": "8.1.0"
  }
}

另一方面，这创建了一个完美的构建包，但 storybook 抱怨缺少 React..

{
  "name": "library",
  "version": "0.1.0",
  "description": "Component Library",
  "main": "lib/index.js",
  "license": "MIT",
  "module": "lib/index.js",
  "types": "lib/index.d.ts",
  "files": [
    "lib/**/*"
  ],
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build_pkg": "rm -rf ./lib && tsc --project ./tsconfig.json",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "storybook-docs": "start-storybook --docs --no-manager-cache"
  },
  "devDependencies": {
    ...
  },
  "peerDependencies": {
    "@material-ui/lab": "4.0.0-alpha.47",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "resolutions": {
    "babel-loader": "8.1.0"
  }
}

请注意，在第一个案例中，我已经将 react 添加为 devDependencies（希望这不会成为构建的包的一部分 - 但没有运气）

Answer 1

所以，这就是我到目前为止所带来的，我很确定可能会有更清洁的解决方案..

我创建了 2 个不同的 package.json 文件package.sb.json package.pkg.json

我创建了一个节点脚本，在交换它们的两个构建之前运行（以及索引文件 - 仅导出构建 pkg 上的组件）

节点脚本如下所示

const fs = require('fs');

const args = process.argv.slice(2);
const flag = args.indexOf('-env');
if (flag === -1 || !args[flag + 1] || !['sb', 'pkg'].includes(args[flag + 1])) {
  console.error('\x1b[41m\x1b[1m%s\x1b[0m', 'ERR! An -env flag is required to be "sb" or "pkg"!');
  return;
}

const env = args[flag + 1];
const pkg = require(`./package.${env}.json`);
const index = {};
index.sb = `
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

`;

index.pkg = `export * from './components';`;

fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2), 'utf8');
fs.writeFileSync('./src/index.tsx', index[env], 'utf8');

package.json 中的脚本如下所示：

"scripts": {
    ...
    "build_pkg": "rm -rf ./lib node_modules package-lock.json yarn.lock && node fixbuild.js -env pkg && yarn && tsc --project ./tsconfig.json",
    ...
    "build-storybook": "rm -rf node_modules package-lock.json yarn.lock && node fixbuild.js -env sb && yarn && build-storybook -s public",
  },

任何更好的方法建议将不胜感激:)