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

执照

麻省理工学院