one loader

1つのローダー

単一ファイルの反応コンポーネントを有効にするWebパックローダー。 vue-loaderに触発されました。

特徴

• CSSおよびJavaScriptコードは、単一の.oneファイル（拡張機能は設定可能）で共同住宅されています
• JavaScriptおよびCSS用の構成可能なローダー
• 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 >

その他の例は、例のディレクトリで入手できます。

• シンプルなカウンター
• 抽出されたCSSファイルを備えたRedux Todoリスト
• スコープ付きCSSを備えたRedux Todoリスト

構成

one-loaderオプションのmapオブジェクトは、単一ファイルコンポーネントのコードタイプにローダーを割り当てる責任があります。

マッピングが提供されていない場合、 <style>コンテンツはcss-loaderで処理され、 <script>コンテンツは変更されません。これらのデフォルト値は、 options.jsファイルで定義されています。

typeプロパティを使用して、カスタムタイプを<style>および<script>タグに割り当てることができます。

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

</ script >

タイプの命名に制限はないため、任意の文字列は機能しますが、説明的な値が推奨されます。

既知の問題

ローダーの内部アーキテクチャでは、[ require loadersを介して[オプション]オブジェクトをサブローダーに渡す必要があります。これは現在、文字列で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'
                    }
                }
            }
        ]
    }
} 

ライセンス

mit