Question

我有一个带有故事书的复读/描述项目。故事书发挥了巨大作用,但一旦我开始用别物进口档案,就会坠毁。

例:

import Foo from "@components/foo" => crash
import Foo from "../../components/foo" => ok

服饰品的罚款。这个问题只与故事书有关。

我的故事:

module.exports = {
  stories: ["../**/stories.tsx"],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: [
          {
            test: /.(ts|js)x?$/,
            exclude: /node_modules/,
            use: { loader: "babel-loader" },
          },
          { test: /.css$/, use: ["style-loader", "css-loader"] },
          { test: /.(png|jpg|gif)$/, use: ["file-loader"] },
          {
            test: /.svg$/,
            use: [
              {
                loader: "babel-loader",
              },
              {
                loader: "react-svg-loader",
                options: {
                  jsx: true,
                },
              },
            ],
          },
        ],
      },
    };
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
};

我的系列会议:

/* eslint-env node */
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const Dotenv = require("dotenv-webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const isProductionMode = (mode) => mode === "production";

module.exports = () => {
  const env = require("dotenv").config({ path: __dirname + "/.env" });
  const nodeEnv = env.parsed.NODE_ENV;
  return {
    mode: "development",
    entry: "./src/index.tsx",
    output: {
      path: path.join(__dirname, "./dist"),
      filename: "[name].[contenthash].bundle.js",
      publicPath: "/",
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", "jsx", ".json"],
      alias: {
    "@api": path.resolve(__dirname, "src/api/"),
    "@assets": path.resolve(__dirname, "src/assets/"),
    "@components": path.resolve(__dirname, "src/components/"),
    "@containers": path.resolve(__dirname, "src/containers/"),
    "@data": path.resolve(__dirname, "src/data/"),
    "@i18n": path.resolve(__dirname, "src/i18n/"),
    "@models": path.resolve(__dirname, "src/models/"),
    "@pages": path.resolve(__dirname, "src/pages/"),
    "@src": path.resolve(__dirname, "src/"),
    "@stores": path.resolve(__dirname, "src/stores/"),
    "@utils": path.resolve(__dirname, "src/utils/"),
  },
    },
    module: {
      rules: [
        {
          test: /.(ts|js)x?$/,
          exclude: /node_modules/,
          use: { loader: "babel-loader" },
        },
        { test: /.css$/, use: ["style-loader", "css-loader"] },
        { test: /.(png|jpg|jpeg|gif)$/, use: ["file-loader"] },
        {
          test: /.svg$/,
          use: [
            {
              loader: "babel-loader",
            },
            {
              loader: "react-svg-loader",
              options: {
                jsx: true,
              },
            },
          ],
        },
      ],
    },
    devServer: {
      historyApiFallback: true,
      port: 3000,
      inline: true,
      hot: true,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html",
      }),
      new Dotenv(),
    ],
    optimization: {
      minimize: isProductionMode(nodeEnv),
      minimizer: isProductionMode(nodeEnv) ? [new TerserPlugin()] : [],
      splitChunks: { chunks: "all" },
    },
  };
};

如何解决这一问题? 我在网上读到第5.24.2和6.1.20号故事书,因此它们是最新版本。

Answer 1

仅添加以下内容:。


const path = require( path );

module.exports = {
  "stories": [
    "../components/**/*.stories.mdx",
    "../components/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
     @storybook/preset-scss ,
  ],
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
       @/interfaces : path.resolve(__dirname, "../interfaces"),
    };

    return config;
  }
}

www.un.org/Depts/DGACM/index_french.htm
著作

Answer 2

当我有同样的问题时,我就这样做了:

Install a package in dev deps yarn add -D tsconfig-paths-webpack-plugin.
Then adjust your ./storybook/main.js config:

... // other imports
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

...
webpackFinal: (config) => {
  config.resolve.plugins = config.resolve.plugins || [];
  config.resolve.plugins.push(
    new TsconfigPathsPlugin({
      configFile: path.resolve(__dirname, "../tsconfig.json"),
    })
  );

  return { ... }
}
...

Answer 3

参考:

// .storybook/main.js

const TsconfigPathsPlugin = require( tsconfig-paths-webpack-plugin );

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

。

Answer 4


My React/Type 故事书项目使用Vite,而不是网上包装。
<https://github.com/eirslett/storybook-builder-vite#customize-vite-config” rel=“noreferer”>readme for storybook-builder-vite<>code>>>clarifies The Buildinger will ed.codevite.config.js file byault,><>/emorycode so any so that You specified in There may be no effect on the Chin-book.

这里,我如何将<条码>的邀请-tsconfig-paths引入故事书《Vite config》,以解决混杂的道路:

// .storybook/main.js const path = require("path"); const tsconfigPaths = require("vite-tsconfig-paths").default; module.exports = { "stories": [ "../frontend/**/*.stories.mdx", "../frontend/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions" ], "framework": "@storybook/react", "core": { "builder": "storybook-builder-vite" }, /** * A option exposed by storybook-builder-vite for customising the Vite config. * @see https://github.com/eirslett/storybook-builder-vite#customize-vite-config * @param {import("vite").UserConfig} config * @see https://vitejs.dev/config/ */ viteFinal: async (config) => { config.plugins.push( /** @see https://github.com/aleclarson/vite-tsconfig-paths */ tsconfigPaths({ // My tsconfig.json isn t simply in viteConfig.root, // so I ve passed an explicit path to it: projects: [path.resolve(path.dirname(__dirname), "frontend", "tsconfig.json")], }) ); return config; }, }

Answer 5

如您使用<代码>@storybook/builder-vite。这间 ne子为我工作。

const tsconfigPaths = require("vite-tsconfig-paths");
...
module.exports = {
  ...
  async viteFinal(config) {
    return {
      ...config,
      plugins: [...(config.plugins || []), tsconfigPaths.default()],
    };
  },
};

Answer 6

如果你重新使用第5号网页,请具体说明除了先前的答复外,还应使用第5号网页:

  core: {
    builder: "webpack5",
  },

最后故事书/主编,随后将类似:

    // .storybook/main.js
const path = require( path );
const appWebpack = require(path.join(process.cwd(),  webpack.config.js ));
module.exports = {
  stories: [ ../src/**/*.stories.@(tsx|mdx) ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
     @storybook/preset-scss 
  ],
  core: {
    builder: "webpack5",
  },
  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      ...[path.resolve(process.cwd(), "src")],
    ];
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      ...appWebpack().resolve.alias,
    };
    return config;
  },
};

这将使两条绝对道路和别条都成为可能(只要这些别物在你的主要网站组合中适当设立。

Edited

在具体涉及别名的事件发生后,我又一次走下了网状石路。

我先更新了以上理论手册/主编的原始定稿,其中明确将各别和单元分号合并。

Edit 2

众所周知,es子将qu子在你创建的全球矫正器(并添加文字材料/审查.js)。你们可以安全地忽视这一点——他们仍在工作。如果我知道如何纠正这种情况,我就会回头,增加第3条。

Answer 7

We re using Vite and typescript project references, for us adding the following to the storybook main.cjs worked;

viteFinal: async (config) => {
    config.resolve.alias = {
        ...config.resolve.alias,
         @some-alias : path.resolve(__dirname,  ../../some/ts/project/reference ),
    };
    return config;
}

Answer 8

除了Jamie Birch的出色答复外,如果您重新使用和不希望安装vite-tsconfig-paths,你可以只读到。


const path = require( path );

module.exports = {
 // ... whatever you already have here
  viteFinal: async (config) => {
    if (config.resolve.alias) {
      config.resolve.alias.push({ find:  @ , replacement: path.resolve(__dirname,  ../src ) +  /  });
    } else {
      config.resolve.alias = [{ find:  @ , replacement: path.resolve(__dirname,  ../src ) +  /  }];
    }
    return config;
  }
}

Answer 9

这里可以有2例使用进口品的情况。

import something from "@components/somewhere"
import something from "@/components/somewhere"

页: 1 档案

import path from "path";

const config: StorybookConfig = {
...other codes are here

  webpackFinal: async (config) => {
    ...other codes are here
    
    (config.resolve as any).alias = {
      ["@components"]: [path.resolve(__dirname, "./components")],
      ["@/components"]: [path.resolve(__dirname, "../components")],
    };
  }
}

希望会帮助!

友情链接