構建的故事書和生產的不同依賴項

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",
  },

任何更好的方法建議將不勝感激:)