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

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'
    }); ]

由于此设置将发出两个文件，因此您可以在输出对象中使用[chunkhash]（您可以相应地修改它）：

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

你可以在Webpack Documentation Code Splitting上阅读更多内容

如果您想了解更多有关npm依赖项的信息，可以查看npm-documentation