one loader

하나의 로더

단일 파일 반응 구성 요소를 활성화하기위한 웹 팩 로더. 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 문자열을 통해 서브 로더로 전달해야합니다. 이것은 현재 문자열에서 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'
                    }
                }
            }
        ]
    }
} 

특허

MIT