如何管理/打包可重复使用的反应库中的依赖项

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