@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

10 months ago

1 year ago

1 year ago

11 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

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

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