webpackで作成した別のバンドルからインポートする方法

Question

webpackを使用した2つのプロジェクトがあります。今では、あるプロジェクトを他のプロジェクトのモジュールとして持っていきたいと思います。 2つのバンドルを作成することはできますが、他のバンドルからインポートする方法はわかりません。

ビットをエラボレーション： - ：

index2.js（bundleTwoとして添付）

import SomeCompoent from "./components/SomeCompoent/SomeCompoent"; 
module.exports = {SomeCompoent} 

- は、私は次のようにのように見えるのインポート元の他のファイルを言うことができます下の別のバンドル（bundleOne）のファイルで、コンポーネント（somecomponent）をインポートします： -

（bundleOne中）index1.js

import {SomeCompoent} from "bundleTwo"; 

が、ここでbundleTwoは、すべてのヘルプは非常に私は自分自身を考え出した

Answer 1

一つの方法を高く評価しているundefiend

あるこの缶エイリアスを使用していることです達成される。

このラインを作るためにimport {SomeCompoent} from "bundleTwo"; bundleTwoは別名で定義することができ、作業、： -

config:{ 
    resolve: { 
     alias: { 
      "bundleTwo": path.join(__dirname, "<path_to_the_bundleTwo>") 
     } 
    .... 

Answer 2

あなたのWebPACKのみ使用したい場合は、単にbundletwoのWebPACKの設定で「UMD」にlibraryTargetを設定します。

このモジュールをインポートするには、バンドルをエクスポートする必要があります。

output: { 
     libraryTarget: 'umd',// make the bundle export 
     filename: "index.js", 
     path: path.resolve(__dirname, "dist"), 
    } 

しかし、これはまた、単にES5コードへのごES6コードをtranspileするバベルを使用することによって達成することができます。今すぐあなたはまたのためにゴクゴクスクリプトを作成することができます

import {SomeCompoent} from "bundleTwo"; 

のようにそれを使用することができますpackage.jsonに "DIST/index2.js" に

をメインに設定

babel index2.js --out-file dist/index2.js

その

gulp.task('js', function() { 
    return gulp.src(['packages/**/*.js', "!**/*.test.js"]) 
     .pipe(babel({ 
      plugins: ['transform-runtime'] 
     })) 
     .pipe(gulp.dest('dist')); 
});