Angular2とWebpackageを使用したノードパッケージの作成

Question

複数のプロジェクトで大規模なアプリケーションを構築していますので、すべてのモジュールでAngular2コンポーネントを追加したいと考えています。

私は自分のプロジェクトでwebpackを使用しているので、ノードモジュールのアドバンテージを使用するといいですが、生成された出力は実際には使用できません。

私がwebpackを使用しようとしている理由は、webpackが提供するローダーを利用するためです。テンプレートとスタイルを別々のファイルに分けたい。

webpackを使用して、別のプロジェクトのnode_moduleとして使用できる方法で、私のangular2コンポーネントをレンダリングする方法はありますか？

Answer 1

デフォルトでは、Webpackはブラウザのバンドルを出力します。コードを別のプロジェクトで使用できるようにするには、Webpack設定でoutput.libraryとoutput.libraryTargetを使用できます。例：

output: { 
    library: 'MyComponentName', // Your component/library name 
    libraryTarget: 'umd', // Or 'commonjs2', 'var', ... 
} 

これは、あなたがブラウザや（WebPACKの、Browserify、RequireJS、...など）AMDまたはCommonJS2をサポートする任意のモジュールシステムにインポートすることができ、バンドルになります。

これらの2つのオプションの詳細については、in the Webpack documentationを参照してください。

ボーナス：あなたがoutput.libraryオプションを設定しない場合

、あなたのメインバンドルのエクスポートされたすべてのプロパティがエクスポートされます。これは、AMDまたはCommonJSを使用しないバンドルラー/ブラウザーにのみ有効です。たとえば：

entrypoint.js：MyLibraryへoutput.libraryで

module.exports = { 
    firstExport: 1, 
    secondExport: 2, 
}; 

が設定、これはブラウザで発生します：

var MyLibrary = { firstExport: 1, secondExport: 2 }; 

output.libraryがなければ、それは次のようになります。

var firstExport = 1; 
var secondExport = 2;