Question

我想禁用故事书的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
      }),
    }
  },
}

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

Answer 2

我遇到了类似的问题，就我而言，我使用的是create-react-app和customize-cra来禁用eslint，因为我也在使用自己的linter配置，但是我遇到了一个问题使用不同的掉落规则的故事书，并抱怨我的源代码。

然后我意识到，我只能查看custom-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

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

然后，您需要过滤该配置中的 rules 数组。

let arr = [
  {name: "Joe", id: "p01"}
];

let searchQuery = 'Joe'
let finalResult = arr.find(({name}) => name.includes(searchQuery));
finalResult = (finalResult && finalResult.id) ? finalResult.id :"No Match Found"
console.log(finalResult);

Answer 4

似乎新的故事书版本改用eslint-webpack-plugin，因此现在所需的更改如下所示：

--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const EslintWebpackPlugin = require('eslint-webpack-plugin');
+
 module.exports = {
    stories: ['./stories/*.stories.tsx'],
    addons: [
@@ -8,4 +11,17 @@ module.exports = {
        '@storybook/addon-links',
        '@storybook/addon-controls',
    ],
+   webpackFinal: config => {
+       return {
+           ...config,
+           plugins: config.plugins.filter(plugin => {
+               // Remove the eslint-webpack-plugin: We already check our code, storybook doesn't need to bother
+               // doing it again with potentially different options.
+               if (plugin instanceof EslintWebpackPlugin) {
+                   return false;
+               }
+               return true;
+           }),
+       };
+   },
 };

Answer 5

storybook v6.3：从默认配置中，注释掉 create-react-app 预设插件：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    // '@storybook/preset-create-react-app'    - HERE - comment this out
  ],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

如果发现 eslint 'error'，create react app preset 将停止你的构建，在我看来这是非常愚蠢的

如何禁用故事书的webpack的eslint-loader？

5 个答案: