2014-12-15 6 views
20

ES6 모듈을 어떻게 연결할 수 있습니까?ES6 모듈을 어떻게 연결합니까?

var foo = 2; // This would normally be scoped to the module. 
export function Bar() {} 

// ...concatenate... 

import { Bar } from 'javascripts/bar' //This file no longer exists in the concatenated scenario. 
export function Bam() {} 
+0

'이 파일은 연결된 시나리오에서 더 이상 존재하지 않습니다.' 파일에서 가져 오거나 내용을 인라인해야합니다. 바를 정의하기 위해 별도의 파일없이 바를 가져 오려고합니까? – DaveS

+0

연재는 무엇을 의미합니까? 두 모듈의 항목을 모두 내보내는 세 번째 파일을 만드는 것이 잘못된 이유는 무엇입니까? –

+0

@DaveS 연결 후 (자바 스크립트가 연결 되었기 때문에) 파일'javascripts/bar'가 더 이상 존재하지 않습니다. – Ben

답변

1

당신이 http://webpack.github.io를 살펴보고 다음 바벨와 결합 제안했다. 다른 방법

당신은 혼자가 바벨 함께 할 수

https://babeljs.io/docs/usage/cli/

+2

바벨 클린만으로 어떻게 그것을 성취 할 수 있는지 설명해 주시겠습니까? – Gabriel

+0

babel이 파일을 연결하는 것처럼 보이지만 import/require를 인라인하지 않습니다. 이러한 가져 오기/필요 호출은 여전히 ​​연결 파일에 있습니다. Webpack과 같은 스크립트를 사용하여 모든 스크립트 종속성을 해결해야합니다. –

4

당신이 브라우저에서 사용할 수 있도록 내부적으로 ES6 모듈을 사용하지 않는 단일 자바 스크립트 파일을 생성 할 일은 원하는 경우,/node 오늘은 Esperanto을 사용하는 것이 좋습니다 (전체 공개, 저는 프로젝트의 관리자입니다). 그것은 모든 파일을 함께 연결하는 번들을 만들 수 있습니다 없이는 browserify 나 webpack 같은 것을 사용하는 것처럼 로더를 사용합니다. 이는 일반적으로 코드가 작고 (로더가 없음), 데드 코드 제거 (Google Closure Compiler 또는 UglifyJS와 같은 축소기를 사용하는 경우)가 더 나은 결과를 가져오고 JS 인터프리터가 결과를 더 잘 최적화 할 수 있으므로 성능이 향상됩니다.

다음은 사용 예,하지만 plenty of tools to integrate Esperanto into your workflow이 참고 :

var fs = require('fs'); 
var esperanto = require('esperanto'); 

esperanto.bundle({ 
    base: 'src', // optional, defaults to current dir 
    entry: 'mean.js' // the '.js' is optional 
}).then(function (bundle) { 
    var cjs = bundle.toCjs(); 
    fs.writeFile('dist/mean.js', cjs.code); 
}); 

이 예는 wiki page on bundling ES6 modules에서 가져옵니다.

+2

링크 esperantojs.org는 포르노/스팸 사이트로 이동합니다. –

관련 문제