升级到 Webpack 5 打破 Storybook 5

Posted 2023-02-19

【中文标题】升级到 Webpack 5 打破 Storybook 5

【英文标题】：Upgrade to Webpack 5 breaking Storybook 5

【发布时间】：2020-08-06 02:19:05

【问题描述】：

在将 webpack 4/storybook 5 项目升级到 webpack 5 以希望利用联合模块的过程中。我有常规的webpack --config webpack.config.js 建设工作，但我似乎无法克服这个故事书配置问题来使其正常工作。故事书 webpack.config.js 中没有太多内容 - 只是一些用于测试较少文件和使用适当加载器的模块规则。在升级 webpack 专业时，我遇到的错误似乎很典型，因为我发现很多人从 3-4 遇到同样的事情，但到目前为止我尝试过的任何事情都失败了。具体的stacktrace是：

Cannot read property 'tapAsync' of undefined
    at ExternalModuleFactoryPlugin.apply (/Users/tbullard/Workspace/unify/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:29:39)
    at compiler.hooks.compile.tap (/Users/tbullard/Workspace/unify/node_modules/webpack/lib/ExternalsPlugin.js:24:63)
    at SyncHook.eval [as call] (eval at create (/Users/tbullard/Workspace/unify/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/Users/tbullard/Workspace/unify/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.beforeCompile.callAsync.err (/Users/tbullard/Workspace/unify/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:665:23)
    at _err0 (eval at create (/Users/tbullard/Workspace/unify/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at compiler.inputFileSystem.readFile (/Users/tbullard/Workspace/unify/node_modules/@storybook/core/node_modules/webpack/lib/DllReferencePlugin.js:72:15)
    at process.nextTick (/Users/tbullard/Workspace/unify/node_modules/@storybook/core/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)

让我相信存在插件不兼容 ????????‍♂️ TIA！

【问题讨论】：

Storybook 是一个完全独立的解决方案，不要手动更新其依赖项，只需更新 it。 （现在，查看它的配置，因为它是开源的，我鼓励你也这样做，它使用 webpack 4，而不是 5。请记住：在semver 中，主要版本更改意味着它向后不兼容并且 会破坏事物）

【参考方案1】：

Storybook尚未准备好与 Webpack 5 一起使用，但它在他们的 roadmap for version 7.0 上。

GitHub issue 中的更多上下文。

【参考方案2】：

截至6.2.0，Storybook 的预览构建器正式兼容 Webpack 5，而管理器构建器非正式地兼容 Webpack 5。请参阅构建器的this explanation 和 Webpack 5 兼容性。另请查看this gist/comments section，了解更详细的安装说明。

如果我理解正确，将构建器设置为 Webpack 5（按照这些说明）将强制 preview 构建器使用 Webpack 5，允许您为酷炫的新 Webpack 5 公开您的 UI 组件module federation 等功能。

但是，如果您还想强制 manager 构建器使用 Webpack 5（这样您就可以完成与 Webpack 4 的分离），您需要使用 Yarn selective dependency resolutions .这是我专门做的（在 package.json 中）：

"resolutions": 
    "webpack": "^5.27.2",
    "css-loader": "^5.0.1",
    "dotenv-webpack": "^7.0.2",
    "html-webpack-plugin": "^5.0.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-virtual-modules": "^0.4.2"
  

通过这些解决方案，Yarn 检测到不再使用 Webpack 4 并将其删除。 SB build 给了this warning：

info @storybook/react v6.2.0-rc.10
info 
info => Loading presets
WARN Unexpected webpack version in manager-builder
WARN - Received: 5.27.2
WARN - Expected: 4.x

从 Webpack 4 迁移到 5 的任务之一是手动为节点包提供浏览器 polyfill，这些是由 Webpack 4 自动提供的。我想指出，如果你发现自己在将 Storybook 升级到 Webpack 时手动提供了大量的 polyfill 5、你可能走错了方向。 Storybook dev-server 构建缓存在本地（安装 Storybook 的包）node_modules 目录（whatever-package/node_modules/.cache/storybook/dev-server）中。定期删除 dev-server 子目录可以帮助您调试构建，并可能使您免于构建一长串不必要的节点 polyfill。 （我很难学到这一点）。

话虽如此，对于 Storybook 的干净安装，您实际上可能不需要任何 polyfill。另一方面，某些情况确实需要节点 polyfill（例如 @storybook/addon-docs 需要“断言”（见下文））。这是在 main.js 中向 Storybook 的 Webpack 配置添加 polyfill（和插件，如果需要）的一种方法：

module.exports = 
  core: 
    builder: 'webpack5',
  ,
  stories: ['../whatever/src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-controls',
    '@storybook/addon-docs',
  ],
  webpackFinal: (config) => 
    return 
      ...config,
      resolve: 
        ...config.resolve,
        fallback: 
          ...config.fallback,
          assert: require.resolve('assert-browserify/'),
        ,
      ,
    ;
  ,
;

Re: 插件，我在尝试使用 addon-essentials 时遇到了严重的节点 polyfill 问题。我一直在...添加...插件零碎（通过 npm 的独立包），这似乎在没有任何 polyfill 的情况下工作（@storybook/actions 和 @storybook/controls 是好的 oob；@storybook/docs 需要断言 polyfill（以上），@storybook/addons 在 manager.ts 中也可以正常工作---即：

import  addons  from '@storybook/addons';
import  themes  from '@storybook/theming';

addons.setConfig(
  theme: themes.dark,
); 

我还想指出，将 sass-loader 添加到 Webpack config.module.rules 可以按预期工作。有些人是running into problems，并使用 Storybook 和 Webpack 5 预设了一些 scss。这是 Sass 的正确 Storybook Webpack 配置的相关部分：

 module: 
        ...config.module,
        rules: [
          ...config.module.rules,
          
            test: /\.(scss)$/,
            use: [
              
                loader: 'style-loader',
              ,
              
                loader: 'css-loader',
              ,
              
                loader: 'postcss-loader',
                options: 
                  postcssOptions: 
                    plugins: function () 
                      return [require('precss'), require('autoprefixer')];
                    ,
                  ,
                ,
              ,
              
                loader: require.resolve('sass-loader'),
                options: 
                  // using sass (Dart) instead of node-sass because node-sass (javascript) cannot resolve Yarn 2's Plug'N'Play synthetic node_modules directory
                  // Evidently, sass is a bit slower to compile than node-sass, but I think I prefer sass anyway for latest features (such as @use)
                  implementation: require('sass'),
                ,
              ,
            ],
          ,
        ],
      ,

希望这能让你起步?

【讨论】：

感谢您写下所有这些内容，内容清晰、内容丰富且全面。

【参考方案3】：

这也发生在我身上，最后我解决了它为storybook webpack5设置依赖项但使用webpack4：

    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-controls": "^6.2.9",
    "@storybook/addon-storysource": "^6.2.9",
    "@storybook/builder-webpack5": "^6.2.9",
    "@storybook/vue": "^6.2.9",

正如我在这里读到的：https://***.com/a/67075112/5384339 我认为在使用 webpack5 之前最好稍等片刻