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

IT技术 javascript reactjs webpack
2022-07-30 01:29:54

我正在创建我的第一个reactjs库，它使用material-ui和react-google-charts以及许多其他 3rd 方库。我使用 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.

我如何处理使用该库的任何项目中可能存在或不存在的其他 3rd 方库？我应该从捆绑包中排除所有第 3 方库吗？如果是，如何确保使用我的库的任何项目都可以找到它们？

1个回答

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

处理第三方库的一种方法是创建一个单独的文件，我更喜欢将所有 3rd 方库添加到数组中并将其提供给入口点，如下所示（您可以相应地修改它）：

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

为了确保 vendor 中的任何内容都不能包含在 bundle.js 中（防止重复），您可以在 plugins 中使用CommonsChunkPlugin：

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

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

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

你可以阅读更多关于Webpack 文档代码拆分

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

其它你可能感兴趣的问题
上一篇如何从 react-redux 中的 Promise 对象获取普通的 json 对象 下一篇React js applicationd不要将数据添加到表中