webpack에 의해 함수에 번들로 묶인 후 es6 클래스를 인스턴스화하는 방법

Question

나는 es6 클래스 자습서를 따르면서 멋진 작은 d3 시각화를 만들었습니다. 그런 다음 초를 만들었고 라이브러리에 묶는 것에 대해 뭔가를해야한다고 생각했기 때문에 초기에 모듈을 시도한 다음 (발견 된 브라우저가 아직 지원하지 않음), webpack 1.13을 설치하고 require()을 사용했습니다. import은 작동해야하며 작동하지 않으며 2.0까지 지원되지 않습니다.

export default class Foo(data, args) 대신 내 번들 .js에 var Foo = function() { function Foo(data, args) ...이 있습니다.

Foo.Foo(data, args)을 시도 할 때 해석기가 불평하지만 내 직감은 프랭크 클래스를 가장하는 순간이 웹팩이 의도하지 않은 것일 수 있습니다. 그리고 예, 저는 모든 모듈 파일을 내 번들 bundle.js에 연결 한 다음 new Foo()으로 갈 수 있지만 적절한 번들 도구를 사용하려고합니다.

온라인 문서에는 ES6의 "가능"한 부분과 실제로 웹팩에서 일어나는 부분이 상당히 다릅니다.

webpack을 사용하여 모듈을 번들로 묶어서 index.js 스크립트의 번들에서 클래스를 분석 할 수있는 단계별 방법은 무엇입니까?

---

부록 : (내가 지금까지했던 어떤) 웹팩가 들러이다

├── bundle.js    #supposed to bundle Foo and Bar 
├── bundle.js.map 
├── index.html   #include bundle.js and index.js before </body> 
├── index.js    #want to be able to new Foo() and Bar() 
├── js 
| ├── foo.js   Foo() lives here 
| └── bar.js   Bar() lives here 
├── LICENSE 
├── node_modules 
| └── (stuff) 
├── package.json 
├── README.md 
├── test 
| └── (stuff) 
└── webpack.config.js  # builds without errors 

Answer 1

. 즉, webpack을 실행 한 후 모든 파일을 구문 분석하여 하나에 넣습니다 (또는 CommonsChunkPlugin과 같은 것을 사용하는 경우).

번들 안의 모든 항목은 비공개이므로 클래스, 코드 등을 공유하려면 노출을해야합니다. https://github.com/webpack/expose-loader이 작업을 수행 할 수 있지만 본질적으로 모든 작업은 전역에 배치됩니다. 브라우저에서 전역 네임 스페이스는 일반적으로 window 개체입니다.

다른 webpack 사용과 코드를 공유하는 것이 더 나은 접근 방법은 코드가 있는지를 보여주고 코드를 웹 팩 번들로 컴파일하는 것입니다. 그는 require.ensure으로 자동 번들 분할을 할 수도 있습니다. 클래스가 자주 사용되지 않는다면 요청시로드 될 수 있습니다.

내가 처음 webpack을 사용하기 시작했을 때 기억하는 것처럼, 위의 내용이 이해가 되길 바란다. 때때로 압도적 인 것처럼 보였으 나 문서는 초보자에게 가장 적합하지 않다.