我已经制作了一些简单的可重用反应组件,并希望知道在 package.json 中包含依赖项以在npm中发布的正确方法。
我目前正在这样做:
假设我的组件将使用最新版本的react并且我已经测试过,它适用于该版本。例如0.13.3
"peerDependencies": {
"react": "^0.13.3"
},
答案 0 :(得分:42)
对于可重复使用的组件:
react
和peerDependencies
。{/ li>中加上devDependencies
依赖项
react
中添加dependencies
依赖项。 peerDependencies
指定您的可重用组件支持/需要哪些版本的React。当使用npm 2时,这也将React添加到要安装的模块列表中,但是npm 3不再是这种情况。
devDependencies
确保在开发组件时运行npm install
或在Travis或类似设备上运行测试时安装React。
将react
放入dependencies
会导致安装多个版本的React,如果有人使用您的组件但在自己的package.json
中有不同版本的React - 有多个版本的React不仅会破坏构建,还会在不同版本尝试交互时导致错误。
答案 1 :(得分:4)
选择的答案肯定是这里规定的方法,但我开始倾向于使用控制反转,而不是依赖于我的库依赖关系的npm对等依赖关系,它很适合我。
如果您构建函数库,则库更容易。维护导出单个函数的库似乎更容易,该函数接收具有所有重度依赖关系的对象,并导出包含每个库典型导出的对象。
<强> LIB / index.js 强>
export default ({ React }) => {
const InjectedComponent = props => (
<p style={{color: props.color}}>This component has no React npm dependencies.</p>
)
/** other stuff */
return { InjectedComponent }
}
<强> app.js 强>
import React from 'react'
import { render } from 'react-dom
/** Import the default export factory from our library */
import createInjectedComponent from 'injected'
/** Call the factory, passing its dependencies (guaranteed to match what we're bundling) and get back our component */
const { InjectedComponent } = createInjectedComponent({ React })
render(<InjectedComponent color="blue" />, document.getElementById('root'))
如果你的组件只能使用给定版本的react或其他依赖项,你可以在传入的React参数的版本周围编写一些断言。总的来说,以这种方式构建库应该不太容易进行新构建随时出现React版本的问题,更重要的是确保您不会导致您的库使用者捆绑多个版本的React和其他重型库。这种模式适用于npm链接(当我没有使用此模式时,我通常有16个以上的库从npm链接同时运行并遇到问题)。
在您的主应用程序中,我建议始终将您使用的反应,反应dom和任何反应库组件分解为供应商包(webpack)并在主包中将其标记为外部,以便您不会无意中捆绑两个版本
答案 2 :(得分:-3)
您可以在react
或peerDependencies
中拥有dependencies
。区别在于peerDependencies
,react
仅使用您的包安装一次。如果您将其放在dependencies
中,则react
将安装两次,一次使用您的包,一次包装。
由于某种原因,React本身似乎赞成peerDependencies
。您显然不希望在Javascript包中有两个单独版本的react
(默认情况下,如果您使用dependencies
),但使用npm dedupe
很容易解决。< / p>
因此没有正确的方法,peerDependencies
和dependencies
都有效。使用dependencies
更符合节点/ NPM方式,但使用peerDependencies
对您的软件包的用户来说更加友好,因为npm dedupe
以及为什么不知道<com.google.android.gms.plus.PlusOneButton
xmlns:plus="http://schemas.android.com/apk/lib/com.google.android.gms.plus"
android:id="@+id/plus_one_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
plus:size="standard"
plus:annotation="inline" />
。需要的。