one loader

Ein Lader

Ein Webpackloader, um Einzelfilm-React-Komponenten zu aktivieren. Inspiriert von vue-loader .

Merkmale

• CSS- und JavaScript-Code, die in einer einzigen .one Datei mitgelegt wurden (Erweiterung ist konfigurierbar)
• Konfigurierbare Lader für JavaScript und CSS
• Unterstützung für Scoped-Stile durch CSS-Module (mit css-loader )

Installation

$ npm i --save-dev one-loader

Beispiel

In webpack.config.js :

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

In ExampleComponent.one :

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

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

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

Weitere Beispiele finden Sie im Beispielverzeichnis: Verzeichnis:

• Einfacher Zähler
• Redux -Todo -Liste mit extrahierter CSS -Datei
• Redux -Todo -Liste mit Scoped CSS

Konfiguration

Das map Objekt in one-loader -Optionen ist dafür verantwortlich, dass sie Ladern in Ihre Einzelkomponenten zuweisen.

Wenn keine Zuordnung bereitgestellt wird, wird der Inhalt <style> mit css-loader verarbeitet und der Inhalt <script> bleibt unverändert. Diese Standardwerte sind in der Datei options.js definiert.

Die type -Eigenschaft kann verwendet werden, um <style> und <script> Tags benutzerdefinierte Typen zuzuweisen:

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

</ script >

Es gibt keine Einschränkungen bei der Benennung vom Typ, sodass eine Zeichenfolge funktioniert, aber beschreibende Werte werden empfohlen.

Bekannte Probleme

Die interne Architektur des Laders erfordert das Übergeben des Optionsobjekts an Unterlader über eine require Zeichenfolge. Dies verursacht derzeit Probleme, wenn Sie map in Saiten mit einem ! Separator. Somit wird die Array -Syntax für die Definition kartierter Lader empfohlen.

Dies wird nicht funktionieren:

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

Dies wird funktionieren:

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

Lizenz

MIT