one loader

一個裝載機

WebPack加載程序啟用單文件React組件。受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字符串。當前，這在用a的字符串中定義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'
                    }
                }
            }
        ]
    }
} 

執照

麻省理工學院