yarn｜LOFTER（乐乎） - 记录生活，发现同好
LOFTER for ipad —— 记录生活，发现同好
&nbsp&nbsp被喜欢
&nbsp&nbsp被喜欢
{list posts as post}
{if post.type==1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type==2}
{if post.type == 3}
{if !!post.image}
{if post.type == 4}
{if !!post.image}
{if !!photo.labels && photo.labels.length>0}
{var wrapwidth = photo.ow < 500?photo.ow:500}
{list photo.labels as labs}
{var lbtxtwidth = Math.floor(wrapwidth*(labs.ort==1?labs.x:(100-labs.x))/100)-62}
{if lbtxtwidth>12}
{if !!labs.icon}
{list photos as photo}
{if photo_index==0}{break}{/if}
品牌${make||'-'}
型号${model||'-'}
焦距${focalLength||'-'}
光圈${apertureValue||'-'}
快门速度${exposureTime||'-'}
ISO${isoSpeedRatings||'-'}
曝光补偿${exposureBiasValue||'-'}
镜头${lens||'-'}
{if data.msgRank == 1}{/if}
{if data.askSetting == 1}{/if}
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post_index < 3}
{if post.type == 1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if post.type == 6}
{if drlist.length>0}
更多相似达人：
{list drlist as dr}{if drlist.length === 3 && dr_index === 0}、{/if}{if drlist.length === 3 && dr_index === 1}、{/if}{if drlist.length === 2 && dr_index === 0}、{/if}{/list}
暂无相似达人，
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if post.type == 6}
this.p={ currentPage:1,pageNewMode:true,isgooglead3:false,ishotrecompost:false,visitorId:0, first:'',tag:'yarn',recommType:'new',recommenderRole:0,offset:14,type:0,isUserEditor:0,};新一代包管理工具yarn - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客
已有账号，立即登录
通过以下账号登录：
imweb是真人前端社区，填写公司信息能帮助你更好的提升业内影响力。
公司邮箱仅作一次性的验证使用，您不必担心信息泄露与垃圾邮件。
如今，他们已入驻imweb：
填写公司信息
自由职业者，学生，或待业中?
返回上一步
(1176浏览)
(2417浏览)
(1017浏览)
本文作者：imweb jaychen
原文出处：
未经同意，禁止转载
facebook发布的新一代包管理工具，旨在解决以往使用npm作为包管理会遇到的一些问题。从其官方介绍可以看到其重点强调的3个点：快、可靠、安全。
yarn拥有以下6个特性：
离线模式: 一次安装，永久使用，无需下载
依赖确定性：安装依赖锁定，保证一致性
更好的网络性能：下载包，优化网络请求，最大限度提高网络利用率
多注册来源处理：不管依赖包被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装(npm/bower), 防止出现混乱不一致。
网络弹性处理: 安装依赖时，不会因为某个单次网络请求的失败导致整个安装挂掉。当请求失败时会进行自动重试。
扁平模式: 当关联依赖中包括对某个软件包的重复引用，在实际安装时将尽量避免重复的创建
安装方法()
安装方式1: Npm i -g yarn
安装方式2: window下载msi，linux 和 mac 上使用 shell 指令来安装（依赖Node）
yarn的命令基本跟npm的大同小异，使用yarn init生成package.json文件，用yarn add 和 yarn add —dev
分别替换 npm install --save 和 npm install --dev 命令即可。具体命令可以参考()执行yarn / yarn install 解析package.json时，分为4个步骤：
依赖关系解析：yarn在解析package.json文件时，会对其每个依赖包进行遍历分析生成yarn.lock文件。该文件描述了项目中每个包以及每个包中所依赖的包的版本信息。
包下载：根据第一步中解析的结果下载特定版本的包。如果该包曾经被下载过，则跳过此次的下载操作，直接使用本地缓存，即yarn的离线模式特性。
包关联：关联拷贝下载或者缓存在全局的包到项目。
包编译：编译项目中使用到的包。
yarn.lock(该文件用于锁定包版本已保障每次编译的结果一致，也可通过yarn install --no-lockfile 命令设置不生成yarn.lock文件):
yarn & npm 常用命令比较
npm install
=== yarn / yarn install
npm install xxx —save === yarn add xxx
npm uninstall xxx —save
=== yarn remove xxx
npm install xxx —save-dev === yarn add xxx —dev
npm update === yarn upgrade
install xxx -g
=== yarn global add
当然，在比较选择yarn与npm时，速度也是一个很重要的衡量指标。
yarn & npm 速度比较
yarn 原仓库 包下载不
稳定 需要设置仓库为tnpm 或在 cnpm
yarn config set registry “https://registry.npm.taobao.org”
script run 有时会存在异常问题
yarn 相比 npm 最直观优势就是快
目前项目在基本可以无痛迁移使用。
yarn 目前并不是非常稳定，不少反馈script run以及下载包有问题。
lock功能具有双面性，是否锁定版本需要看具体情况而定一、安装ReactReact很灵活，可以在各种类型的项目中使用。 你可以使用它创建一个全新的应用程序，也可以逐步将其引入现有的项目，而不需要去重写整个项目。Create React App是开始构建新的React单页应用程序的最佳方式。 它可以帮助您快速集成您的开发环境，以便可以使用最新的JavaScript功能，它提供了一个很好的开发体验，并可以有效优化您的应用程序,提升开发效率。npm&install&-g&create-react-app&
create-react-app&hello-world
cd&hello-world
npm&start上面只是创建了一个React应用，不需要关心也需要不处理后端逻辑或数据库;&它只是一个React的前端环境集成工具,负责创建前端的开发环境，所以你可以使用它与你想要的任何后端进行交互。 它内部使用了webpack，Babel和ESLint，你可以单独配置它们，来达到定制化的效果。您不需要重新编写应用程序即可开始使用React。我们建议将React添加到应用程序的一小部分，例如单个小部件，以便您可以看到它是否适合您的用例。虽然React可以在没有构建工具的情况下使用，但我们建议使用并设置它，以便提高生产力。 现代构建工具通常包括：一个包管理器，例如npm一个打包工具，例如webpack一个编译工具，例如Babel我们建议使用Yarn或npm来管理React前端模块的依赖。通过Yarn安装：yarn&add&react&react-dom通过npm安装：npm&install&--save&react&react-dom我们建议您使用Babel中的React配置让您在JavaScript代码中可以使用ES6和JSX。 ES6是一组现代JavaScript特性，使开发更容易，JSX是对React非常有效的JavaScript语言的扩展。具体请百度Babel如何在许多不同的构建环境中配置Babel。首先 确保你安装了babel-preset-react和babel-preset-es2015，并已经在.babelrc配置中启用它们。我们建议使用像webpack或Browserify这样的打包工具，以便您可以编写模块化代码，它们可以将不同的代码模块打包捆绑到一起，用来优化的代码加载时间。一个简单的React示例如下所示：这里我使用的是bower来安装react和react-dom。mkdir&hello-world&&&cd&hello-world
bower&install&react&babel&--save
touch&index.html然后在index.html中写入以下内容：最后在浏览器中打开这个页面，预览最终效果。
转载请注明： &}