@budarin/spa-react-app-config NPM

@budarin/spa-react-app-config

Данный пакет основан на докладе Ивана Малюгина "А почему бы не вынести все конфиги в отдельный пакет, сократив бойлерплейт до нуля?"

Существует альтернативный проект heft

Преимущества использования внешнего пакета с базовыми настройками конфигураций приложения:

все проекты существуют в одном пространстве-времени с одними и теми же врсиями зависимостей (а те кто - нет - айяйяй! 😂)
все необходимые пакеты устанавливаются при помощи установки всего одного пакета
все приложения будут использовать единые настройки
...

Неостатки:

в CI всегда будут устанавливаться все пакеты для разработки т.к. при публикации пакета устанавливаются только зависимости из секции dependencies, а в данном пакете мы вынуждены все пакеты размещать только в секции dependencies, чтобы они были установлены у клиента

Установка

yarn add @budarin/spa-react-app-config

для pnpm:

создайте файл .npmrc:

public-hoist-pattern[]=*

выполните команду установки: pnpm add @budarin/spa-react-app-config

Настройка проекта

В приложении нужно в файлах конфигурации, созданных в приложении, экспортировать импортированные из node_modules конфиги

babel.config.js

module.exports = require('@budarin/spa-react-app-config').getBabelConfig(__dirname);

prettier.config.js

module.exports = require('@budarin/spa-react-app-config').prettierConfig;

eslintrc.js

module.exports = require('@budarin/spa-react-app-config').eslintrc;

Используем eslintrc.js так как еще не все плагины готовы к новой конфигурации

stylelint.config.js

module.exports = require('@budarin/spa-react-app-config').stylelintConfig;

jest.config.js

module.exports = require('@budarin/spa-react-app-config').jestConfig;

playwright.config.ts

module.exports = require('@budarin/spa-react-app-config').playwrightConfig;

tsconfig

{
    "extends": "node_modules/@budarin/spa-react-app-config/tsconfig.json"
}

webpack

в общем случае просто экспортируем импортированный из node_modules конфиг

module.exports = require('@budarin/spa-react-app-config').webpackConfigs.getDevConfig();

но если конфиг нужно кастомизировать, то делаем это так

const defaultConfig = require('@budarin/spa-react-app-config').webpackConfigs.getDevConfig();

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                //new rules
            },
        ],
    },
};

CLI

spa-react-app-config

Options

install

@babel/core @babel/eslint-plugin @babel/plugin-transform-react-constant-elements @babel/plugin-transform-react-inline-elements @babel/preset-env @babel/preset-react @babel/preset-typescript @bem-react/classname @budarin/browser-pino-dev-logger @budarin/browser-pino-logger @budarin/cache-store @budarin/deep-equal @budarin/json-rpc-request @budarin/local-store @budarin/no-ops-service @budarin/service-stub @budarin/ulid @budarin/validate.ts @statoscope/webpack-plugin @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/dom-screen-wake-lock @types/jest @types/node @types/react @types/react-dom @types/serviceworker @types/trusted-types @types/webpack-env @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-loader babel-plugin-react-remove-properties browserslist caniuse-lite cookie-parser copy-webpack-plugin core-js css-loader cssnano esbuild-loader eslint eslint-config-airbnb eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-boundaries eslint-plugin-import eslint-plugin-jest eslint-plugin-jest-dom eslint-plugin-jsx-a11y eslint-plugin-optimize-regex eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-sonarjs eslint-plugin-testing-library globals html-webpack-plugin identity-obj-proxy jest jest-environment-jsdom lint-staged postcss postcss-loader postcss-pixels-to-rem postcss-preset-env prettier raw-loader react react-aria react-dom react-toastify style-loader stylelint stylelint-config-clean-order stylelint-config-standard stylelint-no-unsupported-browser-features stylelint-plugin-defensive-css stylelint-use-logical-spec terser-webpack-plugin ts-jest tsconfig-paths-webpack-plugin typescript webpack webpack-assets-manifest webpack-cli webpack-dev-server zustand zx

@everything-registry/sub-chunk-146

9 months ago

12 months ago

12 months ago

10 months ago

12 months ago

12 months ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago