如何管理/打包可重複使用的反應庫中的依賴項

Question

我正在創建我的第一個reactjs庫，它使用了material-ui和react-google-charts以及其他一些第三方庫。我使用的WebPack（3.5.6版本）作爲我的捆綁，到目前爲止，我有以下webpack.config.js文件...

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 

在生產中，我已經打上react和react-dom爲「外部材料」，因爲我不不希望他們被捆綁在我的圖書館中，可以安全地承擔任何項目將使用這個項目也將有reactjs。

我該如何處理可能存在或不存在於使用該庫的任何項目中的其他第三方庫？我是否應該排除捆綁中的所有第三方庫，如果有，如何確保項目正在使用我的庫可以找到它們？

Answer 1

我假設你有package.json文件，並且您已經安裝了所需的相關

一個處理第三方庫的方法是創建一個單獨的文件，我更喜歡將所有的第三方庫的陣列，並給予它的入口點是這樣的（你可以相應地修改吧）：

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

，並確保無論是在供應商，不得列入bundle.js（避免重複），可以使內部插件使用CommonsChunkPlugin：

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

由於這settting將被釋放兩種文件，這樣就可以使輸出對象中使用的[chunkhash]（您可以相應修改）：

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

你可以閱讀更多的Webpack Documentation Code Splitting

如果你想知道更多關於npm的依賴關係，你可以看到npm-documentation