如何在可重用的 React 库中管理/打包依赖项 [英] How to manage/package dependencies in a reusable react library

问题描述

我正在创建我的第一个 reactjs 库，它使用 material-ui 和 react-google-charts 以及其他一些第 3 方库.我使用 webpack(版本 3.5.6)作为我的打包器，到目前为止我有以下 webpack.config.js 文件...

I am creating my first reactjs library that uses material-ui and react-google-charts as well as a number of other 3rd party libraries. I'm using webpack (version 3.5.6) as my bundler and so far I have the following webpack.config.js file...

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.

In production, I've marked react and react-dom as 'externals' because I don't want them to be bundled up in my library, it's safe to assume whatever project will be using this project will also have reactjs.

我如何处理其他 3rd 方库，这些库可能存在于使用该库的任何项目中，也可能不存在?我是否应该从捆绑包中排除所有 3rd 方库，如果是这样，如何确保使用我的库的任何项目都能找到它们?

How do I deal with the other 3rd parties libraries which may or may not be present in whatever project is using this library? Should I exclude all 3rd party libraries from the bundle and if so how to ensure whatever project is using my library can find them?

推荐答案

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

I am assuming that you have package.json file and you have already installed required dependencies

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

One of the ways to deal with third party libraries is to create a separate file, I prefer adding all the 3rd party libraries to the array and giving it to the entry point like this (You can modify it accordingly ):

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

并且要确保 vendor 中的任何内容都不能包含在 bundle.js 中(防止重复)，您可以使用 CommonsChunkPlugin 插件内部:

And to make sure whatever is in vendor , must not be included in bundle.js (Prevent Duplication) , you can make use of CommonsChunkPlugin inside plugins :

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

由于此设置将发出两个文件，因此您可以使用 [chunkhash] 内部输出对象(您可以相应地修改它):

As this settting will be emitting two file so you can make use of [chunkhash] inside output object(You can modify it accordingly) :

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

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

如果你想了解更多关于 npm 的依赖，可以看 npm 文档

If you want to know more about npm dependencies , You can see npm-documentation

这篇关于如何在可重用的 React 库中管理/打包依赖项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！