CamelCase 및 Spinal-case 이름이 포함 된 Webpack 출력 UMD 라이브러리

Question

Webpack에서 UMD 번들을 생성하도록 구성하여 AMD 및 CommonJS의 패키지 이름을 소문자 (척추)로 지정하고 전역 컨텍스트에 CamelCase 이름?

(function(f) { 
    // CommonJS 
    if (typeof exports === "object" && typeof module !== "undefined") { 
    module.exports = f(require('react')); 

    // RequireJS 
    } else if (typeof define === "function" && define.amd) { 
    define(['react'], f); 

    // <script> 
    } else { 
    var g; 
    if (typeof window !== "undefined") { 
     g = window; 
    } else if (typeof global !== "undefined") { 
     g = global; 
    } else if (typeof self !== "undefined") { 
     g = self; 
    } else { 
     // works providing we're not in "use strict"; 
     // needed for Java 8 Nashorn 
     // see https://github.com/facebook/react/issues/3037 
     g = this; 
    } 
    g.ReactDOM = f(g.React); 
    } 
})(function(React)... 

Answer 1

또한 true에 재산 umdNamedDefine 설정을해야한다 : 예를 들어

나는 나의 번들

(function webpackUniversalModuleDefinition(root, factory) { 
    if(typeof exports === 'object' && typeof module === 'object') 
     module.exports = factory(require("dependency")); 
    else if(typeof define === 'function' && define.amd) 
     define("my-library", ["dependency"], factory);   // spinal-case 
    else if(typeof exports === 'object') 
     exports["my-library"] = factory(require("dependency")); // spinal-case 
    else 
     root["MyLibrary"] = factory(root["dependency"]);   // CamelCase 
})... 

이 그것을 ReactDOM의 모습입니다 시작하는 기대한다. UMD 랩 라이브러리를 수행 할 때 내 output 블록이 일반적으로 어떻게 보이는지입니다. 그것이 가장 설명되는 바와 같이 내가 현재 가지고 NPM 패키지에서 예제를 사용합니다 : 내 NPM 패키지가 package.json에서 dom-regex이라는 것을

output: { 
    path: './lib', 
    filename: 'dom-regex.js', 
    library: 'DomRegex', 
    libraryTarget: 'umd', 
    umdNamedDefine: true 
}, 

을 감안할 때,이 다음에 내 패키지를 사용 나를 수 있습니다 방법 :

ES6 :

import DomRegex from 'dom-regex'; 

RequireJS

창에 515,

var DomRegex = require('dom-regex'); 

는 (파일이 창에 직접 노출되는 경우)

window.DomRegex 

---

는 이름이 UMD에로 수출되고 어떤 부분은 중요하지 않다 싸서 가져올 때 이름을 지어줍니다.

를 천만에요 : 그것은 포장 UMD이기 때문에 로컬 (하지 node_modules에서) 내 프로젝트에 있었다하더라도, 예를 들어 dom-regex를 사용하고, 파일 이름이 dom-regex.js했다, 나는 아직도, 이전의 모든 예제를 할 수 repo for dom-regex을 탐색하고 패키지를 다운로드하여 어떻게 작동하는지 확인하십시오.