再利用可能な反応ライブラリの依存関係を管理する/パッケージする方法

Question

material-uiとreact-google-chartsを使用する最初のreactjsライブラリと他の多くのサードパーティライブラリを作成しています。私はドンので、「見た目」などreactとreact-domをマークした、生産に

const webpack = require('webpack') 
const path = require('path') 

const BUILD_DIR = path.resolve(__dirname, 'lib') 
const APP_DIR = path.resolve(__dirname, 'src') 

const WebpackConfig = { 

    entry: { 
     app: APP_DIR + '/index.js', 
    }, 
    output: { 
     path: BUILD_DIR, 
     filename: 'index.js', 
     libraryTarget: 'umd', 
     library: 'TestComponent' 
    }, 
    module: { 
     loaders: [ 
      { 
       loader: 'babel-loader', 
       test: /.js$/, 
       exclude: /node_modules/, 
       include : APP_DIR, 
       options: { 
        presets: [ 'react', 'es2015', 'stage-2' ] 
       } 
      } 
     ], 
    }, 
} 

// webpack production config. 
if (process.env.NODE_ENV === 'production') { 

    WebpackConfig.externals = { 
     'react': 'react', 
     'react-dom': 'react-dom' 
    } 

    WebpackConfig.plugins = [ 
     new webpack.optimize.AggressiveMergingPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
      beautify: false, 
      mangle: { 
       screw_ie8: true, 
      }, 
      compress: { 
       warnings: false, 
       screw_ie8: true 
      }, 
      comments: false 
     }), 
    ] 
} 

module.exports = WebpackConfig 

を私は私のバンドラとしてのWebPACK（バージョン3.5.6）を使用していますし、これまでのところ、私は、次のwebpack.config.jsファイルを持っている...

それらを私の図書館にまとめて欲しいと思っても、このプロジェクトを使用するプロジェクトはどれも reactjsであると仮定するのが安全です。

このライブラリを使用しているプロジェクトであれば、他のサードパーティのライブラリを扱うにはどうすればよいですか？バンドルからすべてのサードパーティのライブラリを除外する必要があります。もしそうなら、私のライブラリを使っているプロジェクトを確実に見つける方法はありますか？

Answer 1

私はあなたがpackage.jsonファイルを持っていて、すでにサードパーティのライブラリに対処する方法の

一つ必要な依存関係をインストールしていると仮定しています私はに、すべてのサードパーティのライブラリを追加することを好む、別のファイルを作成することですアレイと、このようなエントリーポイントにそれを与える（あなたがそれに応じて変更することができます）：bundle.js（防止複製）には含まれてはならない、

const VENDOR_LIBS = [ 'react', 'react-dom', 'react-router' ] 
    entry: { 
    bundle: 'index.js', 
    vendor: VENDOR_LIBS 
    } 

、ベンダーにあるものを確認するために、あなたが作ることができますプラグイン内のCommonsChunkPluginの使用：

あなたがいる場合 Webpack Documentation Code Splitting

の詳細を読むことができます

output: { 
    path: path.join(__dirname, 'dist'), 
    filename: '[name].[chunkhash].js' 
    }, 

：

plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor' 
    }); ] 

あなたは、出力オブジェクトの内部[chunkhash]を利用することができますので、このsetttingは（あなたがそれに応じて変更することができます）2つのファイルを発光するようにnpmの依存関係についてもっと知りたい場合は、npm-documentation