Если вы доберетесь до этой статьи, это потому, что вы уже знакомы с Сборник рассказов И вы хотите перейти к новым и классным вещам:). Я дам вам свою простую старую конфигурацию и расскажу вам о своем приключении об обновлении от V5.3 до V6.
Примечание: Я думаю, что это должно работать также для V5, так как я не изменил свою конфигурацию сборника рассказов на обновлениях на v5.3.
Ну, моя конфигурация для V5.3 была:
// .storybook/config.js
import {addParameters} from '@storybook/react';
import '../src/styles/App.scss'; // all my app styles because I don't import them in each component
import './styles.scss'; // with some overrided styles for Storyb
import theme from './theme';
addParameters({
options: {theme}
});
// .storybook/main.js
module.exports = {
stories: ['../src/components/**/*.stories.js'],
};
// .storybook/theme.js
import {create} from '@storybook/theming';
import gigedsLogo from '../src/statics/logo.png';
export default create({
base: 'light',
brandTitle: 'Gigeds',
brandImage: gigedsLogo,
colorSecondary: '#de2020'
});
// .storybook/webpack.config.js
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.(jpg|jpeg|png|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
limit: 1000000,
name: `statics/images/[name].[ext]`,
},
},
],
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader',
options: {
limit: 10000,
name: `statics/fonts/[name].[ext]`,
},
},
]
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.css', '.scss'],
modules: [resolve('../node_modules')],
alias: {
components: resolve('../src/components'),
views: resolve('../src/views'),
statics: resolve('../src/statics'),
},
},
};
Как видите, конфигурация очень проста, без плагинов и с некоторыми изменениями в теме и пользовательской конфигурации WebPack. Представьте, что у вас есть сборник рассказов, работающий нормально И вы только что обновили его от V5.3 до V6, затем запустите сценарий пряжа SB (В вашем случае может быть ... компиляция ... и бам!
ERR! Error: You have both a "main" and a "config". Please remove the "config" file from your configDir
Hm … если я удалю свою конфигурацию, мне нужно загрузить свои стили и где -то свою индивидуальную тему 😕. Ну, давайте удалим наш config.js И перейдите к документации, чтобы увидеть, как это исправить. Пойдем в Документация по конфигурации темы Анкет Бинго! Установите пару новых пакетов Yarn Add -dev @Storybook/Addons @Storybook/Theming Затем создайте ./manager.js Чтобы загрузить свою индивидуальную тему 💪
// ./manager.js
@see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
addons.setConfig({
theme: themes.dark,
});
ПРИМЕЧАНИЕ: Вначале я только что скопировал и вставил все то, что у меня было в моем ./config.js А потом побежал пряжа SB и получил ошибку:
ERROR in ./src/styles/App.scss 2:0 Module parse failed: Unexpected character '@' (2:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Это было потому, что я импортировал App.scss Файл, который больше не нужен в V6.
Итак, здесь мы идем снова, запустим пряжа SB а также … 😏 Бам! Кровавый терминал
A lot of errors, one per `.jsx` file which has `.scss` import.
Я подумал, чтобы добавить конфигурацию WebPack где -нибудь. После хорошего дайвинга в документации я нашел Пользовательская конфигурация WebPack Что довольно ясно, но потом я понял, где загрузить все истории, и в документации ничего не упоминается о Загрузка историй + конфигурация WebPack одновременно . С ними всегда обращаются отдельно. Поэтому я только что добавил их в тот же модуль.
// ./main.js
const custom = require('./webpack.config.js');
module.exports = {
stories: ['../src/components/**/*.stories.js'],
webpackFinal: (config) => {
return {
...config,
module: {
...config.module,
rules: custom.module.rules,
},
resolve: {
...config.resolve,
...custom.resolve,
}
};
},
};
Затем запустить пряжа SB и … бум?,) Браузер открылся, загрузка сборников рассказов … загрузка … загрузка … 😕 Нам все еще что -то упускаем … Давайте проверим терминал. Ой! Много предупреждений (по одному на компонент):
... WARNING in ./src/components/alert/Alert.stories.js 10:4 Module parse failed: Unexpected token (10:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders ...
Кажется Вабел-загрузчик Отсутствует в нашей конфигурации WebPack, которая в моем случае с Storybook v5.3 не было необходимым, поэтому давайте добавим его.
// .storybook/webpack.config.js
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
module: {
rules: [
...
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
{
loader: 'eslint-loader',
options: {
cache: true,
emitWarning: true,
},
},
],
},
...
Теперь снова запустить SB , компиляция … Браузер открылся … Загрузка сборника рассказов … загрузка … Бум! 💓 Мы сделали это! Справочник, загруженный всеми компонентами 🎉 Легко ха? 😉
Резюме
Если у вас такая же конфигурация, что и у меня, тогда:
- Удалить config.js
- Создайте Manager.js, чтобы загрузить вашу тему
- В вашем Main.js загружайте истории и Конфигурация WebPack
- Добавьте вабел-загрузчик в конфигурацию WebPack
Подробнее: Миграционная документация и Конфигурация сборника рассказов
Спасибо за чтение, комментарии приветствуются.
Изображение по Antonios ntoumas от Pixabay
Оригинал: “https://dev.to/ozaytsev86/how-i-migrated-react-storybook-from-v5-3-to-v6-3knc”