Добавить пустые неиспользуемые имена классов для реагирования компонентов - PullRequest
Новая
       7

Добавить пустые неиспользуемые имена классов для реагирования компонентов

1 голос
/ 03 апреля 2019

В настоящий момент неиспользуемые classNames автоматически удаляются из моих компонентов, если я их не использую и «заполняю» их CSS.Я занимаюсь разработкой виджета, который можно использовать на иностранных сайтах, и хочу, чтобы пользователи могли написать собственный CSS-код на своем веб-сайте для работы с виджетом.В некоторых местах classNames должны основываться на идентификаторе (например, className={'question-'+question_id}.

. Я не знаю, какая часть моего веб-пакета отвечает за удаление классов. Как я могу отключить его или лучше: Какя могу сказать webpack НЕ удалять эти специальные классы? 

const path = require('path');
const loaderUtils = require('loader-utils');

const HtmlWebPackPlugin = require("html-webpack-plugin");
const DotenvPlugin = require('webpack-dotenv-plugin');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  inject: "head"
});

const dotEnvPlugin = new DotenvPlugin({
  sample: './.env.default',
  path: './.env'
});

const getLocalIdent = (loaderContext, localIdentName, localName, options) => {
  .....
};

module.exports = {
  output: {
    library: 'XLVNT',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    filename: 'x.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          },
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: 'x-[folder]-[local]',
              getLocalIdent: getLocalIdent,
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: 'x-[folder]-[local]',
              getLocalIdent: getLocalIdent,
            }
          } ,
          "sass-loader"
        ]
      },
      {
          test: /\.(pdf|jpg|png|gif|svg|ico)$/,
          use: [
              {
                  loader: 'url-loader'
              },
          ]
      },
    ]
  },
  plugins: [dotEnvPlugin, htmlWebpackPlugin]
};

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

Если вы хотите, чтобы кто-то использовал ваш компонент или библиотеку компонентов, вам следует больше думать о «подпорках», а не о классах CSS для настройки стиля.

Если вам нужно, чтобы пользователи вашего виджета могли полностью манипулировать стилем вашего компонента, у вас есть много опций, без предварительной записи classNames на всех ваших элементах.

Самое распространенное, что я нашел, это чтобы ваш компонент получал свойство altClass или className, а затем использовал его внутри оболочки вашего компонента. Таким образом, пользователи могут сами назначать класс для управления стилями.

Это свойство может быть даже объектом, который содержит набор ключей / значений css, которые вы можете применить таким же образом, но ко многим элементам в вашем компоненте.

Надеюсь, это ответит на ваш вопрос.

Если вам нужно вдохновение, вам следует проверить некоторые библиотеки UI с открытым исходным кодом, такие как Material UI или Ant Design , они прекрасно справляются с такими сценариями.

Давайте отложим Реакт на секунду. Представьте, что у вас есть функция, которая получает два аргумента: id и className. id от элемента на вашей странице пользователя ClassName - это строка, соответствующая классу, который будет использоваться для настройки вещей.

webpack.config.js 

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'colorme.js',
    library: 'colorme'
  }
};

index.js 

export function addThings(id, className) {
  document.getElementById(id)
    .innerHTML = (
      '<div class="'+ className +'">Testing things</div>'
    )
}

Эта функция addThings будет вставлять в ваш элемент (из id) div с настраиваемым className.

Затем на странице вашего пользователя: 

<html>
  <head>
    <style>
      .asd {
        background-color: red;
      }
      .awd {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/javascript" src="./colorme.js"></script>
    <script>
      window.colorme.addThings('test', 'asd')
      // window.colorme.addThings('test', 'awd')
      // ...
    </script>
  </body>
</html>

Вы увидите, что добавлен div "Testing things" с классом "asd" или "awd" соответственно. И теперь ваши пользователи могут контролировать, как выглядит этот div.

Если это работает для вас, читайте больше здесь: https://webpack.js.org/guides/author-libraries/

Если передача параметров имеет большое значение, вы можете использовать атрибуты data- *, например, так: 

<style>
  .asd {
    background-color: red;
  }
  .awd {
     background-color: blue;
  }
</style>
<div data-root_class="asd" data-some_other_class="lala" id="test"></div>
<script type="text/javascript" src="./colorme.js"></script>
<script> colorme.init('test') </script>
0 голосов
/ 07 апреля 2019

Первое, что выглядит здесь немного неправильно, - это конкатенация имен классов. Пожалуйста, используйте строковые литералы es6. Показано ниже: 

className={`question-.${question_id}`}

Кроме этого, вы можете попробовать classnames из https://github.com/JedWatson/classnames

Пожалуйста, дайте мне знать, если это поможет.

...