one loader

Один погрузчик

Загрузчик WebPack для включения однолетных компонентов реагирования. Вдохновлен vue-loader .

Функции

• CSS и код JavaScript, расположенные в одном файле .one (расширение настраивается)
• Настраиваемые погрузчики для JavaScript и CSS
• Поддержка стилей Scoped через модули CSS (с использованием css-loader )

Установка

$ npm i --save-dev one-loader

Пример

В webpack.config.js :

 {
    module : {
        loaders : [
            {
                test : / .one$ / ,
                loader : 'one-loader' ,
                options : {
                    map : {
                        'text/css' : [ 'style-loader' , 'css-loader' ] ,
                        'javascript' : 'babel-loader'
                    }
                }
            }
        ]
    }
}

В ExampleComponent.one .

 < style >
    html {
        background-color: green;
    }

    .basicExample {
        color: white;
    }
</ style >

< script >
    export default ( ) => {
        return < div className = "basicExample" >
            Hello World
        </ div >
    }
</ script >

В каталоге примеров доступно больше примеров:

• Простой счетчик
• Redux Todo List с извлеченным файлом CSS
• Redux Todo List с CSS COPED CSS

Конфигурация

Объект map в параметрах one-loader отвечает за назначение загрузчиков типам кодов в ваших однолетных компонентах.

Если содержимое <style> не будет обработано с помощью css-loader , а содержимое <script> останется неизменным. Эти значения по умолчанию определены в файле options.js .

Свойство type можно использовать для назначения пользовательских типов для <style> и <script> тегов:

 < style type =" text/less " >
  .component {
    text-align: center;
  }
</ style >
< script type =" es6 " >

</ script >

Нет ограничений на именование типов, поэтому любая строка будет работать, однако рекомендуется описательные значения.

Известные проблемы

Внутренняя архитектура загрузчика требует передачи объекта параметров в подгруппы через require . В настоящее время это вызывает проблемы при определении загрузчиков объектов map в струнах с помощью ! сепаратор. Таким образом, синтаксис массива рекомендуется для определения отображенных погрузчиков.

Это не сработает:

 {
    module : {
        loaders : [
            {
                test : / .one$ / ,
                loader : 'one-loader' ,
                options : {
                    map : {
                        'text/css' : 'style-loader!css-loader' ,
                        'javascript' : 'babel-loader'
                    }
                }
            }
        ]
    }
}

Это будет работать:

 {
    module : {
        loaders : [
            {
                test : / .one$ / ,
                loader : 'one-loader' ,
                options : {
                    map : {
                        'text/css' : [ 'style-loader' , 'css-loader' ] ,
                        'javascript' : 'babel-loader'
                    }
                }
            }
        ]
    }
} 

Лицензия

Грань