A partir de 6.2.0 Le générateur de prévisualisation de Storybook est officiellement compatible avec Webpack 5 et le générateur de gestion est officieusement compatible avec Webpack 5. Voir cette explication des constructeurs et la compatibilité avec Webpack 5. Consultez également cette section gist/commentaires avec des instructions d'installation plus détaillées.
Si j'ai bien compris, le fait de configurer le constructeur en Webpack 5 (selon ces instructions) forcera l'utilisation de l'outil de création de pages Webpack. aperçu pour utiliser Webpack 5, ce qui vous permet d'exposer vos composants d'interface utilisateur aux nouvelles fonctionnalités de Webpack 5 telles que fédération de modules .
Toutefois, si vous souhaitez également forcer le manager pour utiliser Webpack 5 (afin de ne plus avoir à se séparer de Webpack 4), vous devrez utiliser les éléments suivants Résolutions sélectives des dépendances de Yarn . Voici ce que j'ai fait spécifiquement (dans un 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"
}
Avec ces résolutions, Yarn détecte que Webpack 4 n'est plus utilisé et le supprime. Le build SB donne cet avertissement :
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
L'une des tâches de la migration de Webpack 4 vers 5 consiste à fournir manuellement des polyfills de navigateur pour les paquets de nœuds qui étaient automatiquement fournis par Webpack 4. Je tiens à souligner que si vous vous retrouvez à fournir manuellement une tonne de polyfills lors de la mise à niveau de Storybook vers Webpack 5, vous avez probablement pris la mauvaise direction. Les builds de Storybook dev-server sont mis en cache dans un répertoire node_modules local (du paquet où Storybook est installé) (whatever-package/node_modules/.cache/storybook/dev-server). Supprimer régulièrement le sous-répertoire dev-server peut vous aider à déboguer votre build et potentiellement vous éviter de construire de longues listes de polyfills node inutiles. (J'ai appris cela à la dure).
Cela dit, pour une installation propre de Storybook, vous n'avez peut-être pas besoin de polyfill. D'un autre côté, certains cas nécessitent les polyfills de nœuds (par exemple, @storybook/addon-docs nécessite "assert" (voir ci-dessous)). Voici une façon d'ajouter les polyfills (et les addons, si vous voulez) à la configuration Webpack de Storybook dans main.js :
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 : addons, j'ai eu de sérieux problèmes avec les polyfills de nœuds en essayant d'utiliser addon-essentials . J'ai... ajouté... des addons au coup par coup à la place (paquets autonomes via npm), et cela semble fonctionner sans aucun polyfill ( @storybook/actions y @storybook/controls sont bons oob ; @storybook/docs nécessite le polyfill assert (ci-dessus), @storybook/addons fonctionne également très bien avec les thèmes dans manager.ts - c'est à dire :
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
addons.setConfig({
theme: themes.dark,
});
Je tiens également à souligner que l'ajout de sass-loader à Webpack config.module.rules fonctionne comme prévu. Certaines personnes rencontrer des problèmes avec quelques présélections scss avec Storybook et Webpack 5. Voici la partie pertinente d'une configuration correcte de Storybook Webpack pour Sass :
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'),
},
},
],
},
],
},
J'espère que cela vous fera décoller
