前端之家

  1. 首页
  2. 问答

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

• 问答

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

问题是，当我想使用 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","typescript": "^4.1.2","web-vitals": "^1.0.1"
  },"resolutions": {
    "babel-loader": "8.1.0"
  }
}

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

{
  "name": "library","devDependencies": {
    ...
  },"resolutions": {
    "babel-loader": "8.1.0"
  }
}

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

wanghuialex163 回答：构建的故事书和生产的不同依赖集

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

我创建了 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",},

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

node-modulesnode.jsnpmreactjsstorybook
本文链接：https://www.f2er.com/23694.html

大家都在问