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

我有一个简单的组件,需要反应和mobx使用。 当我通过webpack构build我的图书馆时,它包括反应,mobx和mobx在这个包中作出反应。 不过,我想添加他们作为一个对等的依赖,让我的模块的用户安装库。

这可能吗? 我的webpackconfiguration看起来像这样,它很好地构builddist / 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 } }) ] } 

您必须在package.json中标记为“外部”依赖项:

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

下面是一篇关于在npm flawlessy上发布组件的简短但非常有用的文章:

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

在构build开发和testinglib的过程中需要做出区分,以及lib的使用者将会实际使用哪些东西。 他们很可能不需要使用预先build立的库

您的webpack构build可能只是为了您自己的开发目的,在这种情况下,构build中捆绑的反应和任何其他依赖是完全正确和必要的。

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

只需要通过自己的webpackconfiguration预编译发行版,如果您想直接通过web上的脚本标记进行构build,或者专门使用UMD commonJS。 在这种情况下,你可以让你的webpackconfiguration声明反应和朋友作为externals https://webpack.js.org/configuration/externals

如果仅仅通过导入作为节点模块来消费,那么对于你希望由消费者提供的模块的包来说,添加节点依赖关系就足够了,并且确保主文件被引用,所以它们自己的build立知道从哪里import它

 "main": "./index.js", // source code entry (this is what consumer requires, at which point their build will trace deps to react etc) "peerDependencies": { "react": "*", "mobx-react": "*" // or required min versions }