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

时间:2017-12-05 10:34:36

标签: node.js npm webpack

我有一个简单的组件,需要使用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
            }
        })
    ]
}

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

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

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

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

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

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

externals