为故事书和制作构建的不同依赖项集

Posted 2023-02-19

【中文标题】为故事书和制作构建的不同依赖项集

【英文标题】：Different set of dependencies for storybook and production built

【发布时间】：2021-10-04 01:43:55

【问题描述】：

我在一个内部反应组件库工作， 图书馆还配有一本故事书，展示了所有不同的元素。

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

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

（向 devDependencies 或依赖项添加 react 会在使用组件库时生成“多个反应实例”错误 - 显然，在构建的 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（希望这不会成为构建包的一部分 - 但没有运气）

【参考方案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",
  ,

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