one loader

Um carregador

Um carregador webpack para ativar componentes de reação de arquivo único. Inspirado no vue-loader .

Características

• Code CSS e JavaScript co-localizados em um único arquivo .one (a extensão é configurável)
• Carregadores configuráveis para JavaScript e CSS
• Suporte para estilos de escopo através de módulos CSS (usando css-loader )

Instalação

$ npm i --save-dev one-loader

Exemplo

Em webpack.config.js :

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

Em ExampleComponent.one :

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

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

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

Mais exemplos estão disponíveis no Diretório Exemplos:

• Contador simples
• Lista Redux TODO com arquivo CSS extraído
• Redux TODO List com CSS com escopo

Configuração

O objeto map nas opções one-loader é responsável por atribuir carregadores aos tipos de código em seus componentes de arquivo único.

Se nenhum mapeamento for fornecido <style> conteúdo será processado com o conteúdo css-loader e <script> permanecerá inalterado. Esses valores padrão são definidos no arquivo options.js .

A propriedade type pode ser usada para atribuir tipos personalizados às tags <style> e <script> :

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

</ script >

Não há restrições à nomeação do tipo, portanto, qualquer string funcionará, no entanto, os valores descritivos são recomendados.

Questões conhecidas

A arquitetura interna do carregador exige que a passagem do objeto Opções sub-carregadores por meio de uma string require . Atualmente, isso está causando problemas ao definir os carregadores de objetos map em strings com um ! separador. Assim, a sintaxe da matriz é recomendada para definir carregadores mapeados.

Isso não vai funcionar:

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

Isso vai funcionar:

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

Licença

Mit