2017-12-29 32 views
1

React App에 포함 된 독립형 번들을 생성했습니다. 응용 프로그램 자체는로드되는 확장 번들 (다음 XB)을 알지 못하지만 XB는 내부에서 사용하는 응용 프로그램 및 라이브러리에 대해 알고 있습니다. XB와 함께 컴파일 된 App 공유 라이브러리 패키지를 만드는 방법은 무엇입니까? 내 생각에 React 및 React-dom 라이브러리로 컴파일 된 App이 XB 제외를 그러한 라이브러리로 컴파일하지 않고 대신 응용 프로그램에서 사용할 경우? 반응 라이브러리가없는 독립형 번들

나는 컴파일에서 반작용 제외 웹팩 설정에 넣어 :

var config = { 
//.... 
    output: { 
     library: 'videoEditor', 
     libraryTarget: 'umd', 
     path: BUILD_PATH+"./../bundles/", 
     filename: '[name].bundle.js' 
    }, 
// ... 
} 

// .... later just extending config if compiling as standalone 
config.externals = Object.assign(config.externals,{'react':'React'}); 

예, 번들 라이브러리 반응하지 않고 종료 날 수 있습니다 (그래서 크기가 10킬로바이트에 190킬로바이트에서 감소) 그. 하지만로드하려고하면 오류가 발생합니다.

index.js?7afc:1 Uncaught ReferenceError: require is not defined 
    at eval (index.js?7afc:1) 
    at Object.<anonymous> (video-editor.bundle.js:80) 
    at __webpack_require__ (video-editor.bundle.js:30) 
    at video-editor.bundle.js:73 
    at video-editor.bundle.js:76 
    at webpackUniversalModuleDefinition (video-editor.bundle.js:9) 
    at video-editor.bundle.js:10 

외부가 모두 작동하지 않습니다. 괜찮습니다.

는하는 index.js 7afc : 1 내가 작업을 필요로하는 방법을 이해하지 module.exports = require('react');

로오고있다 import React from 'react'; 내부가

import React from 'react'; 
import AppLayout from 'layouts/app'; 

입니다. 글로벌 공간에서는 보이지 않습니다.

업데이트 : 사용 가능한 옵션 인 'umd', 'commonjs', 'this'에서 libraryTarget을 변경하려고했습니다. 결과는 같습니다.

나는 웹팩에서 약 commonChunkPlugin을 알고 있지만 다른 사람들이 여러 소스를 서로 구분하여 프로젝트를 만들었습니다. 와 함께

답변

0

당신은 또한 v0.14.x 이후 나는 그것이 작동하지 않은 것을

externals: { 
    // Use external version of React 
    "react": "React", 
    "react-dom": "ReactDOM" 
}, 
+0

반작용에서 외관에 ReactDOM를 추가 할 필요가 반응한다. 그러나 실제로 코드에 'react-dom'을 가져올 필요가 없습니다. –