3

我在 Storybook 5 的 CRA 项目中使用 Mui 和 Lodash。我在 CRA 中
成功地对 Mui 和 Lodash 导入进行了树摇动babel-plugin-import，使用以下命令.bablerc.js

module.exports = {
  presets: ["react-app", "@babel/preset-typescript"],
  plugins: [
    [
      "babel-plugin-import",
      {
        libraryName: "@material-ui/core",
        libraryDirectory: "esm",
        camel2DashComponentName: false,
      },
      "core",
    ],
    [
      "babel-plugin-import",
      {
        libraryName: "@material-ui/icons",
        libraryDirectory: "esm",
        camel2DashComponentName: false,
      },
      "icons",
    ],
    ["lodash"],
  ],
};

但是我无法在 Storybook 5 中做同样的事情。当我尝试在 Storybook 中使用相同的配置（复制.storybook/.babelrc.js到大约一分钟）。从 babel config 中删除预设也无济于事。

Storybook 托管在与我的 CRA 相同的根目录中，共享node_modules.

如何让导入摇树在 Storybook 5 中工作？

这是我的配置：

// .storybook/presets.js
module.exports = ['@storybook/preset-create-react-app'];

// .storybook/webpack.config.js
module.exports = function({ config }) {
    // https://github.com/storybookjs/storybook/issues/6974#issuecomment-499903328
    config.module.rules.unshift({
        test: /\.stories.js$|\.stories.jsx$|\.stories.tsx$|\.stories.ts$/,
        loaders: [require.resolve('@storybook/source-loader')],
        enforce: 'pre',
    });
    
    return config;
};

// .storybook/.babelrc.js
module.exports = {
  presets: ["react-app", "@babel/preset-typescript"],
  plugins: [
    [
      "babel-plugin-import",
      {
        libraryName: "@material-ui/core",
        libraryDirectory: "esm",
        camel2DashComponentName: false,
      },
      "core",
    ],
    [
      "babel-plugin-import",
      {
        libraryName: "@material-ui/icons",
        libraryDirectory: "esm",
        camel2DashComponentName: false,
      },
      "icons",
    ],
    ["lodash"],
  ],
};

// .storybook/config.js
iimport { addDecorator, addParameters, configure } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import { withConsole } from "@storybook/addon-console";
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import "../src/config";

import withIntl from "./decorators/intl";
import withReduxStoreAndConnectedRouter from "./decorators/reduxStoreWithDependentProviders";
import stylesProvider from "./decorators/stylesProvider";
import setup from "./decorators/setup";

const req = require.context("../src", true, /stories.tsx$|stories.ts$/);
const loadStories = () => req.keys().forEach((filename) => req(filename));

addDecorator(setup);
addDecorator(stylesProvider);
addDecorator(withKnobs);
addDecorator(withIntl);
addDecorator(withReduxStoreAndConnectedRouter);
addDecorator((storyFn, context) =>
  withConsole(consoleConfig)(storyFn)(context)
);

addParameters({
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
});

addParameters({
  backgrounds: [
    { name: "darkGray", value: "#34373c" },
    { name: "gray", value: "#A0A0A0" },
    { name: "lightGray", value: "#F0F0F0" },
  ],
});

configure(loadStories, module);
4

0 回答 0