Обфусцировать React classNames в существующей кодовой базе - PullRequest
Новая
       14

Обфусцировать React classNames в существующей кодовой базе

1 голос
/ 07 апреля 2020

Привет, ребята

Я работаю над большим приложением React с существующей кодовой базой (более 100 компонентов). В настоящее время мы используем традиционный метод стилей, например: 

JSX:
<div className="div" />

SCSS: 
.div {
 /* ... */
}

Мы используем веб-пакет с этими загрузчиками: 

/* ... */
use: [
       {
         loader: MiniCssExtractPlugin.loader,
         options: {
           publicPath: '../'
         }
       },
       'css-loader',
       'postcss-loader',
       {
         loader: 'sass-loader',
         options: { implementation: sass }
       }
     ]
/* ... */

Есть ли способ скрыть эти classNames как из JSX, так и из S CSS без переписывания всего этого? Можно ли перезаписать только некоторые компоненты, или мы должны переписать все это?

Спасибо.

1 Ответ

0 голосов
/ 07 апреля 2020

css-loader имеет параметр modules, который при установке на true скрывает имена классов. К сожалению, это запутает все имена классов и потребует от вас изменить все значения <div className="div" /> на: 

import styles from <stylesheet>;
<div className={styles.div} />

Редактировать : Единственный способ, которым я могу избежать изменить все способы использования можно, разделив конфигурацию css в веб-пакете на два шаблона, например: 

{
    test: /.*dirA\/.*\.css/,
    use: [{ loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } }, ...]
},
{
    test: /.*dirB\/.*\.css/,
    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, ...]
}
...