one loader

หนึ่งโหลดเดอร์

webpack loader เพื่อเปิดใช้งานส่วนประกอบปฏิกิริยาไฟล์เดียว แรงบันดาลใจจาก vue-loader

คุณสมบัติ

• CSS และ JavaScript Code ตั้งอยู่ในไฟล์ .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 ด้วยไฟล์ CSS ที่แยกออกมา
• รายการ Redux todo ด้วย css ที่กำหนดขอบเขต

การกำหนดค่า

วัตถุ 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 ในสตริงด้วย A ! ตัวแยก ดังนั้นจึงแนะนำให้ใช้ไวยากรณ์อาร์เรย์สำหรับการกำหนดรถตักแมป

สิ่งนี้จะ ไม่ ทำงาน:

 {
    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'
                    }
                }
            }
        ]
    }
} 

ใบอนุญาต

มิกซ์