2017-12-29 24 views
1

リアクションアプリに含まれるスタンドアロンバンドルを作成しました。アプリケーション自体は、それがロードするエクステンションバンドル(次のXB)については何も知らないが、XBは内部で使用するアプリケーションとライブラリについて知っている。 XBにコンパイルしたApp共有ライブラリパッケージを作成するにはどうすればいいですか?私はReactとReact-domライブラリでコンパイルして、XBをそのようなライブラリでコンパイルしないようにして、代わりにそれらをアプリケーションから使用すればいいのですか? リアクションライブラリーが入っていないスタンドアロンバンドルに反応する

は私がコンパイルからリアクト除外するのWebPACKの設定に入れ:

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 import React from 'react';の内側にあり

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

ですが、私は仕事を必要と作り方を理解していない

module.exports = require('react');として来ています。グローバルな空間では見えないと思われます。

update:利用可能なオプション: 'umd'、 'commonjs'、 'this'でlibraryTargetを変更しようとしました。結果は同じです。

私はウェブパックから約commonChunkPluginを知っていますが、私はいくつかの別々のソースからいくつかのプロジェクトを別々の人々がコンパイルしています。

答えて

0

反応して、あなたもあなたからの見た目でReactDOMを追加する必要があり、私はそれが動作しない、ということでした

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

v0.14.x以降反応します。しかし、実際に私のコードでは 'react-dom'のインポートがありません。 –

関連する問題