2016-06-13 5 views
2

동형 모듈을 작성하려고합니다. 서버 자바 스크립트는 JINT 내부에서 실행됩니다. 모듈의 서버 버전을 구축하기 위해 특별히 webpack 번들을 만들었습니다. JINT가 호출 할 수있는 단일 함수를 공개하려고합니다. 그러나 나는이 전역 개체에 대한 함수를 찾고 있습니다 JINT에서 scriptEngine.Invoke 함수를 사용하고 있습니다. 전역 객체에 함수를 가져 오는 방법을 모르겠습니다. 노출 로더를 사용해 보았지만 전체 모듈을 내보내는 것처럼 보였고 하나의 함수 만 노출되도록 할 수는 없습니다. 나는 결과 번들을로드하고 FormValidator 세계를 검토 할 때는webpack을 사용하여 전역 함수 내보내기

export default function validate() { 
    return 'HelloWorld'; 
} 

그것이 유효성을 가진 객체입니다 여기에

require("expose?FormValidator!./formValidator.js"); 

내 formValidator.js입니다 : 여기

내 진입 점입니다 기능. Validate 함수를 FormValidator에 직접 할당 할 수있는 방법이 있습니까?

답변

1

ES6 내보내기 구문을 사용하는 대신 module.exports = function validate() {}을 사용하면 쉽게 작동합니다.

바벨 (Babel)은 아마 당신이 지금 당장 기대하는대로 작동하지 않는 이유 일 것입니다. 바벨로 내보내기은 다음을

export default function testDefault() {} 
export function testNamed() {} 

이 경우

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 
exports.default = testDefault; 
exports.testNamed = testNamed; 
function testDefault() {} 
function testNamed() {} 

로 바뀐다 내 보낸 객체는 기본()와 testNamed() 할 것이다.

webpack 2 용 업데이트 : webpack 2에서는 ES6 가져 오기와 CommonJS 내보내기를 함께 사용할 수 없습니다. module.exports를 사용할 경우 require도 사용해야하며 import를 사용하는 경우에는 export와 함께 사용해야합니다.

webpack 2에서는 ES6 기본 내보내기를 사용하여 전역을 사용할 수 없습니다. 가장 많이 사용되는 솔루션은 지금 단순히 다음을 수행 작은 진입 점을 확인하는 것입니다 :

// assuming myLibraryEntry is the default export in the required file. 
const myLibraryEntry = require('./real-entry-point-in-es6.js').default; 

// This makes myLibraryEntry available as whatever you set libraryName to in your config. 
module.exports = myLibraryEntry; 
+0

아니요, 작동하지 않습니다.'''module.exports'''를 사용하면'''library''가 창에서 정의되지 않게됩니다. – Halt

+0

하지만 완전히 잘못한 것은 아닙니다. 조금만 수정하면 효과가 있습니다. 내 대답을 확인하고 실수가 있으면 교정 해 주시겠습니까? – Halt

+0

webpack 2 솔루션의 타이코트 버전이 있습니까? – rottenoats

2

당신 do.Here 내 코드와 같이 저도 같은 상황입니다 :

webpack.config 의 .js :

module.exports = { 
    entry: './src/method/eTrack/index.js', 
    output: { 
     filename: 'eTrack.js', 
     path: path.resolve(__dirname, 'dist'), 
     library: 'eTrack', 
     libraryTarget: 'umd' 
    }, 
}; 

./src/method/eTrack/index.js :

import create from './create'; 
import getAll from './getAll'; 
import getByName from './getByName'; 
import remove from './remove'; 

export function eTrack() { 

} 
eTrack.trackers = []; 
eTrack.create = create; 
eTrack.getAll = getAll; 
eTrack.getByName = getByName; 
eTrack.remove = remove; 

webpack을 통해 번들 된 후에는 창에서 eTrack에 액세스 할 수 있지만 객체가됩니다. 즉, eTrack()을 직접 호출 할 수는 없지만 eTrack.eTrack()과 같이 호출해야합니다.

그리고 저는 Ambroos의 해결책을 시도했습니다. ./src/method/eTrack/index를 변경하십시오.JS로 :이 시간 이후에 번들로

module.exports = function eTrack() { 

} 

, 나는 브라우저 창에서 eTrack에 액세스 할 수 있으며, eTrack 개체가 사라과 콘솔에서 eTrack is undefined 오류가 발생합니다.

은 그럼 많은 도움이 기사를 발견 : http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html

변경을 내 index.js로! 예상대로 그리고 모든 것이 내가 <script> tag.Though 나는 돈에 직접 eTrack()를 호출 할 수 있습니다 작품

function eTrack() { 

} 
module.exports = eTrack; 

@ Ambroos의 답변과이 솔루션의 차이점을 알지 못합니다.

+0

webpack 2에서는 ES6 가져 오기와 CommonJS 내보내기를 함께 사용할 수 없습니다. module.exports를 사용할 경우 require도 사용해야하며 import를 사용하는 경우에는 export와 함께 사용해야합니다. – Ambroos

+0

@Ambroos 실제로 webpack 2를 사용하고 있으며 정상적으로 작동합니다. – Halt