webpack-bem-loader без React.js

Форум /

Добрый, возможно я хочу скрестить ежа с ужом, но.. У меня делается сайт , все по блокам и по полочкам, от БЭМ я хочу - уровни переопределения, блоки, элементы, модификаторы в стилях, в js пока будет слабая поддержка, к react команда не готова, ну и к i-bem тоже. Js будет пока свой. На js очень хотелось поддержки классов и всех других прелестей, поэтому собирал на webpack через babel, но сейчас нужно делать уровни переопределения, webpack из коробки не знает о них ничего, делать руками импорты - мракобесие. Нашел лоадер webpack-bem-loader, переписал импорты на более удобные, собрал, в итоге со стилями все ок, но js крашится с ошибкой: app.js:4 Uncaught TypeError: (webpack_require(...).default || webpack_require(...)).applyDecls is not a function. Если руками в бандле поудалять вызов .applyDecls(), то все работает как нужно. Как я понимаю, это из-за того, что лоадер заточен под react, может есть какие опции, которые мне помогут, или где поправить это? Я форкнул бы.

6 years ago

nanervax

Плохо прочитал доку, буду ковырять генератор

6 years ago

Yeti-or

Да ты можешь передать кастомный генератор в опции: generators https://github.com/bem/webpack-bem-loader#options

6 years ago

nanervax

А если у меня есть три уровня [base, desktop, mobile] и мне нужно сделать два бандла - [base, desktop] и [base, mobile], это мне надо делать две конфигурации вебпака и запускать отдельно? Ну или через какие нибудь переменные окружения передавать тип бандла и рулить, webpack-bem-loader это из коробки не могет?

6 years ago

qfox

@nanervax Получается, интересует i-bem? Расскажи, пожалуйста, про результаты

6 years ago

nanervax

Не не, я без i-bem делаю, мне уровни нужны в стилях, но собираю я все вебпаком, сейчас у меня так:

const path = require('path');

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const OUTPUT = path.resolve(__dirname, 'public');
const SRC_PATH = './frontend/';
const URL_LOADER_LIMIT = 8192;


const mode = (process.env.NODE_ENV === 'development') ?
  'development' : 'production';

const bundleType = (process.env.NODE_BUNDLE_TYPE === 'mobile') ?
  'mobile' : 'desktop';

const levels = {
  desktop: [
    SRC_PATH + 'base.blocks',
    SRC_PATH + 'desktop.blocks'
  ],
  mobile: [
    SRC_PATH + 'base.blocks',
    SRC_PATH + 'mobile.blocks'
  ]
};


let config = {
  mode: mode,
  entry: {
    vendors: 'vendors/app.js'
  },
  resolve: {
    modules: [SRC_PATH, path.resolve(__dirname, "node_modules")]
  },
  output: {
    filename: '[name].min.js',
    path: OUTPUT
  },
  module: {
    rules: [
      {
        test: /\.(png|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: URL_LOADER_LIMIT
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|vendors)/,
        use: [
          {
            loader: 'webpack-bem-loader',
            options: {
              naming: 'origin',
              levels: levels[bundleType],
              techs: ['js', 'css'],
              techMap: {
                css: ['scss']
              },
              generators: {
                js: (files) => files.map(
                  file => `require('${file.path}')`
                ).join(',\n')
              }
            }
          },
          'babel-loader'
        ],
      },
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: OUTPUT
            }
          },
          {
            loader: "css-loader",
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                ctx: {
                  env: mode
                }
              }
            }
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: [SRC_PATH],
            }
          },
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
    ],
  },
  plugins: [
    new CleanWebpackPlugin([OUTPUT]),
    new MiniCssExtractPlugin({
      filename: '[name].min.css',
      chunkFilename: '[id].css',
    }),
  ],
  externals: {
    jquery: 'jQuery',
  }
};

config.entry[bundleType] = bundleType + '.blocks/app/app.js';

if (mode === 'development') {
  config.devtool = 'source-map';
  config.stats = {
    errorDetails: true,
    colors: true,
    modules: true,
    reasons: true,
  };
}

module.exports = config;

А в package.json:

"scripts": {
    "build-desktop": "NODE_ENV=production NODE_BUNDLE_TYPE=desktop npx webpack",
    "build-desktop-dev": "NODE_ENV=development NODE_BUNDLE_TYPE=desktop npx webpack",
    "build-mobile": "NODE_ENV=production NODE_BUNDLE_TYPE=mobile npx webpack",
    "build-mobile-dev": "NODE_ENV=development NODE_BUNDLE_TYPE=mobile npx webpack",
    "build": "npm run build-desktop & npm run build-mobile",
    "build-dev": "npm run build-desktop-dev & npm run build-mobile-dev"
  }

Но при этом у меня параллельно вызываются два вебпака, и консоль часто висит после завершения сборок, да и неудобно это в целом и архитектурно неверно. Извиняюсь, не знаю как тут на форуме сделать spoiler

6 years ago

nanervax

Никто не поможет? Или мой вопрос слишком глуп?

Чтобы оставлять комментарии, необходимо авторизоваться.