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

baubqpgj  于 2022-11-13  发布在  Webpack
关注(0)|答案(6)|浏览(209)

我想禁用故事书的webpack的eslint-loader,因为我使用其他过程来验证代码的质量。
我知道存在的webpack的配置故事书一样的代码下面,也许我可以使用一些过滤器对config.rules,但也许是不好:

const path = require('path')

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

  return config
}

我试着在故事书的文档中搜索这件事,但没有找到任何关于这件事的东西。

dgenwo3n

dgenwo3n1#

使用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
      }),
    }
  },
}

P.S.新版本将有一个CLI参数来禁用eslint:https://github.com/storybookjs/storybook/pull/134526.2.0-alpha.7已经支持它

pjngdqdw

pjngdqdw2#

我也遇到过类似的问题,在我的例子中,我使用create-react-app和customize-cra来禁用eslint,因为我也使用我自己的linter配置,但是我在使用不同的linter规则的Storybook中遇到了一个问题,并抱怨我的源代码。
然后我意识到,我可以只看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')
在我的例子中,规则没有名称/或者我找不到它。

zynd9foi

zynd9foi3#

使用此示例了解如何自定义Storybook的默认配置。
然后,您需要过滤该配置中的rules数组。

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'),
        );
      }),
    },
  },
};
lh80um4z

lh80um4z4#

看起来较新的故事书版本使用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;
+           }),
+       };
+   },
 };
w80xi6nr

w80xi6nr5#

故事书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),
    },
  },
};

create react应用程序预设将停止您的构建,如果它发现eslint '错误',这在我看来是超级愚蠢的

dly7yett

dly7yett6#

你可以在npm脚本中添加DISABLE_ESLINT_PLUGIN=true选项来启动storybook。下面的npm脚本禁用了storybook的webpack的eslint-loader。

"storybook": "DISABLE_ESLINT_PLUGIN=true start-storybook -p 6006 -s public ",

相关问题