one loader

تحميل واحد

محمل webpack لتمكين مكونات رد فعل ملف واحد. مستوحاة من 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 >

تتوفر المزيد من الأمثلة في دليل الأمثلة:

• عداد بسيط
• Redux TODO LIST مع ملف CSS المستخرج
• Redux TODO LIST مع CSS SCOPED

إعدادات

يعد كائن map في خيارات one-loader مسؤولاً عن تعيين اللوادر إلى أنواع الرموز في مكونات الملف الواحد.

إذا لم يتم تقديم أي رسم خرائط <style> ، فسيتم معالجة محتويات css-loader وستظل محتويات <script> دون تغيير. يتم تعريف هذه القيم الافتراضية في ملف options.js .

يمكن استخدام خاصية type لتعيين أنواع مخصصة للعلامات <style> و <script> :

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

</ script >

لا توجد قيود على تسمية النوع ، لذلك ستعمل أي سلسلة ، ومع ذلك يوصى بالقيم الوصفية.

القضايا المعروفة

تتطلب الهندسة المعمارية الداخلية للودر تمرير كائن الخيارات إلى المحمل الفرعي من خلال سلسلة require . هذا يسبب حاليًا مشكلات عند تحديد لوادر كائنات 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'
                    }
                }
            }
        ]
    }
} 

رخصة

معهد ماساتشوستس للتكنولوجيا