one loader

Un chargeur

Un chargeur WebPack pour activer les composants de réaction à un seul fichier. Inspiré par vue-loader .

Caractéristiques

• CSS et Code JavaScript co-localisés dans un seul fichier .one (l'extension est configurable)
• Chargeurs configurables pour JavaScript et CSS
• Prise en charge des styles portée via les modules CSS (en utilisant css-loader )

Installation

$ npm i --save-dev one-loader

Exemple

Dans webpack.config.js :

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

Dans ExampleComponent.one :

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

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

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

Plus d'exemples sont disponibles dans les exemples de répertoire:

• Compteur simple
• Liste de TODO Redux avec le fichier CSS extrait
• Liste de TODO Redux avec CSS dans la portée

Configuration

L'objet map dans les options one-loader est responsable de l'attribution des chargeurs aux types de code dans vos composants unifiles.

Si aucun mappage n'est fourni, le contenu <style> sera traité avec css-loader et <script> le contenu restera inchangé. Ces valeurs par défaut sont définies dans le fichier options.js .

La propriété type peut être utilisée pour attribuer des types personnalisés à <style> et <script> Tags:

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

</ script >

Il n'y a aucune restriction sur la dénomination de type, donc toute chaîne fonctionnera, mais des valeurs descriptives sont recommandées.

Problèmes connus

L'architecture interne du chargeur nécessite de passer l'objet Options aux sous-chargeurs via une chaîne require . Cela cause actuellement des problèmes lors de la définition des chargeurs d'objets map dans les chaînes avec A ! séparateur. Ainsi, la syntaxe du tableau est recommandée pour définir des chargeurs mappés.

Cela ne fonctionnera pas :

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

Cela fonctionnera:

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

Licence

Mit