Question

我有一个简单的组件，需要使用react和mobx。当我通过webpack构建我的库时，它包括react和mobx以及mobx-react in bundle。但是，我想将它们添加为对等依赖项，并让我的模块的用户安装库。

这可能吗？我的webpack配置看起来像这样，它很好地构建到dist / build.js我只需要弄清楚如何排除库。

module.exports = {
    entry: [ './index.js' ],
    output: {
        path: path.resolve('./dist'),
        filename: 'build.js',
        library: 'myLibrary',
        libraryTarget: 'commonjs'
    },  
    module: {
        rules: loaders
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        })
    ]
}

Answer 1

你必须在package.json中标记为“外部”依赖：

externals: { 'react': 'commonjs react' }

以下是关于在npm flawlessy上发布组件的简短但非常有用的文章：

https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

Answer 2

在构建开发和测试lib之间，以及lib的使用者实际使用的内容之间，您需要做出区分。他们很可能不需要使用预先构建的lib

您的webpack构建可能仅用于您自己的开发目的，在这种情况下，在构建中捆绑响应和任何其他依赖项是完全正确和必要的。

当消费者通过npm使用您的库时，您的包通常应该将它们指向源代码index.js，而不是构建的文件，并且他们自己的构建将通过require / {跟踪依赖关系。 {1}}并将它们捆绑起来，在这种情况下，它将使用它们的对等依赖项而不是libs依赖项

如果您希望通过网络上的脚本标记直接进行构建，或者特别是使用UMD通信，那么只需要通过您自己的webpack配置预构建发行版。在这种情况下，您可以将您的webpack配置声明为响应，并将朋友设为import https://webpack.js.org/configuration/externals

如果只是通过作为节点模块导入来使用它，那么就应该为您希望由消费者提供的模块添加对象依赖项，并确保引用主文件，所以他们自己的构建知道从哪里导入它

externals

如何通过npm发布基于反应的组件而不包含反应？

2 个答案: