如何禁用 storybook 的 webpack 的 eslint-loader？

Question

我想禁用 storybook 的 webpack 的 eslint-loader，因为我使用其他过程来验证代码的质量。

我知道存在关于故事书的 webpack 配置，例如下面的代码，也许我可以在 上使用一些过滤器config.rules，但可能不好：

const path = require('path')

module.exports = async ({ config }) => {
  // some modifications

  return config
}

我正在尝试搜索关于此的故事书文档，但没有找到任何相关内容。

Answer 1

解决方案对plugin instanceof EslintWebpackPlugin我没有帮助，但这种方法有帮助：

//.storybook/main.js

module.exports = {
  webpackFinal: config => {
    return {
      ...config,
      plugins: config.plugins.filter(plugin => {
        if (plugin.constructor.name === 'ESLintWebpackPlugin') {
          return false
        }
        return true
      }),
    }
  },
}

PS新版本会有一个CLI参数来禁用eslint：https : //github.com/storybookjs/storybook/pull/13452，6.2.0-alpha.7已经支持了

Answer 2

我遇到了类似的问题，在我的情况下，我使用 create-react-app 和custom -cra来禁用 eslint，因为我也在使用我自己的 linter 配置，但是我在 Storybook 使用不同的 linting 规则时遇到了问题，并抱怨我的源代码。

然后我意识到我可以查看customize-cra的源代码来了解他们如何在webpack中禁用eslint并且它起作用了。

disableEsLint = (e) => {
  return e.module.rules.filter(e =>
    e.use && e.use.some(e => e.options && void 0 !== e.options.useEslintrc)).forEach(s => {
      e.module.rules = e.module.rules.filter(e => e !== s)
    }), e
}

module.exports = function ({ config }) {
  // Same config, except it is missing the eslint rule
  config = disableEsLint(config);

  // Do any thing else you want here
  config.module.rules.unshift({
    test: /\.story\.tsx?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: { parser: 'typescript' },
      },
    ],
    enforce: 'pre',
  });

  // return the new config
  return config;
};

我不确定这是否适用于您的情况，但值得一试。

其他建议是尝试在 webpack 中控制台日志配置，找到规则的名称和 config.module.rules.delete('your-rule-name')

在我的情况下，规则没有名称/或者我找不到它。

Answer 3

使用此示例了解如何自定义故事书的默认配置。

然后您需要过滤该配置中的规则数组。

module.exports = {
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
      rules: config.module.rules.filter(rule => {
        if (!rule.use) return true;
        return !rule.use.find(
          useItem => typeof useItem.loader === 'string' && useItem.loader.includes('eslint-loader'),
        );
      }),
    },
  },
};