one loader

Un cargador

Un cargador webpack para habilitar componentes reactos de un solo archivo. Inspirado en vue-loader .

Características

• El código CSS y JavaScript ubicado en un solo archivo .one (la extensión es configurable)
• Cargadores configurables para JavaScript y CSS
• Soporte para estilos de alcance a través de módulos CSS (usando css-loader )

Instalación

$ npm i --save-dev one-loader

Ejemplo

En webpack.config.js :

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

En ExampleComponent.one :

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

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

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

Hay más ejemplos disponibles en el directorio de ejemplos:

• Mostrador
• Lista de TODO de Redux con archivo CSS extraído
• Lista de TODO de Redux con CSS de alcance

Configuración

El objeto map en opciones one-loader es responsable de asignar cargadores a los tipos de código en sus componentes de un solo archivo.

Si no se proporciona un mapeo, se procesará el contenido <style> con css-loader y el contenido <script> permanecerá sin cambios. Estos valores predeterminados se definen en el archivo options.js .

La propiedad type se puede usar para asignar tipos personalizados a <style> y <script> etiquetas:

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

</ script >

No hay restricciones en el nombre de tipo, por lo que cualquier cadena funcionará, sin embargo, se recomiendan valores descriptivos.

Problemas conocidos

La arquitectura interna del cargador requiere pasar el objeto de opciones a sub-cargadores a través de una cadena require . ¡Actualmente esto está causando problemas al definir cargadores de objetos map en cadenas con un ! separador. Por lo tanto, se recomienda la sintaxis de la matriz para definir cargadores asignados.

Esto no funcionará:

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

Esto funcionará:

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

Licencia

MIT