javascript - 如何在可重用的 React 库中管理/打包依赖项

Question

我正在创建我的第一个 reactjs 库，它使用 material-ui和 react-google-charts以及许多其他第 3 方库。我正在使用 webpack(版本 3.5.6)作为我的 bundler ，到目前为止我有以下 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 标记为“externals”，因为我不希望它们被捆绑在我的库中，这是安全的假设任何项目将使用该项目也将有 reactjs。

我如何处理其他第 3 方库，这些库可能存在也可能不存在于使用该库的任何项目中？我应该从 bundle 中排除所有第 3 方库吗？如果是，如何确保使用我的库的任何项目都能找到它们？

Answer 1

我假设你有 package.json文件并且您已经安装了所需的依赖项

处理第三方库的方法之一是创建一个单独的文件，我更喜欢将所有第 3 方库添加到数组并将其提供给这样的入口点(您可以相应地修改它):

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

并确保 vendor 中的任何内容都不得包含在 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