故事书：使用 awesome-typescript-loader答案

【问题标题】：storybook: use awesome-typescript-loader故事书：使用 awesome-typescript-loader
【发布时间】：2020-11-25 16:20:59
【问题描述】：

默认情况下，Storybook 使用babel-loader，但当前版本的 babel-loader 与 Storybook 所需的不兼容。所以我决定改用awesome-typescript-loader。也就是说，我的项目使用babel-loader，而Storybook使用awesome-typescript-loader。

我添加了webpack.config.js 文件：

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

但 Storybook 仍然坚持加载 babel-loader。

ERR! Error: Cannot find module 'babel-loader'

如何设置备用加载程序？

【问题讨论】：

标签： settings storybook babel-loader awesome-typescript-loader

【解决方案1】：

尝试使用@next 版本，有a fix 5 days ago 通过跳过babel loader 检查来解决它。

这是使用 @next 版本运行 init 命令的方法：

npx -p @storybook/cli@next sb init

此外，如果您还没有清理过 babel-loader 和 package.json，删除 npm 锁定文件，然后重新运行 npm install。

请注意@next 不是稳定版本，这并不完全理想，但如果您有兴趣继续关注the conversation

【讨论】：