one loader

Satu loader

Loader webpack untuk mengaktifkan komponen reaksi file tunggal. Terinspirasi oleh vue-loader .

Fitur

• Kode CSS dan JavaScript berlokasi bersama dalam satu file .one (ekstensi dapat dikonfigurasi)
• Loader yang dapat dikonfigurasi untuk JavaScript dan CSS
• Dukungan untuk Gaya SCOPED melalui modul CSS (menggunakan css-loader )

Instalasi

$ npm i --save-dev one-loader

Contoh

Di webpack.config.js :

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

Di ExampleComponent.one :

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

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

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

Lebih banyak contoh tersedia di Direktori Contoh:

• Penghitung sederhana
• Daftar Redux Todo dengan file CSS yang diekstraksi
• Redux Todo Daftar dengan CSS yang Terletak

Konfigurasi

Objek map dalam opsi one-loader bertanggung jawab untuk menetapkan loader ke jenis kode dalam komponen file tunggal Anda.

Jika tidak ada pemetaan yang disediakan <style> konten akan diproses dengan css-loader dan <script> konten akan tetap tidak berubah. Nilai -nilai default ini didefinisikan dalam file options.js .

Properti type dapat digunakan untuk menetapkan jenis kustom ke <style> dan <script> Tag:

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

</ script >

Tidak ada batasan pada penamaan jenis, sehingga string apa pun akan berfungsi, namun nilai deskriptif direkomendasikan.

Masalah yang diketahui

Arsitektur internal loader memerlukan melewati objek opsi ke sub-loader melalui string require . Ini saat ini menyebabkan masalah saat mendefinisikan pemuatan objek map dalam string dengan A ! pemisah. Dengan demikian sintaks array direkomendasikan untuk mendefinisikan loader yang dipetakan.

Ini tidak akan berhasil:

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

Ini akan berhasil:

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

Lisensi

Mit