版权声明:本文为博主原创文章,未经博主允许不得转载。
PS:转载请注明出处
作者:TigerChain
地址:http://www.jianshu.com/p/f05eabdf3ab6
本文出自TigerChain简书
React系列教程
教程简介
1、阅读对象
本篇教程适合初学者,老鸟直接略过,如果有误,欢迎指出,谢谢。
2、教程难度
初级
正文
yarn是facebook(2016年10月11日)开源的一款代替npm的js包管理工具
相比于node的亲儿子npm来说,yarn有以下优势
yarn安装依赖的过程分为三步
1、处理: Yarn 通过向代码仓库发送请求,并递归查找每个依赖项,从而解决依赖关系。
2、抓取: 接下来,Yarn 会查找全局的缓存目录,检查所需的软件包是否已被下载。如果没有,Yarn 会抓取对应的压缩包,并放置在全局的缓存目录中,因此 Yarn 支持离线安装,同一个安装包不需要下载多次。依赖也可以通过 tarball 的压缩形式放置在源码控制系统中,以支持完整的离线安装。
3、生成: 最后,Yarn 从全局缓存中把需要用到的所有文件复制到本地的 node_modules 目录中。
npm 客户端把依赖安装到 node_modules目录的过程具有不确定性。这意味着当依赖的安装顺序不同时,node_modules 目录的结构可能会发生变化。这种差异可能会导致类似“我的机子上可以运行,别的机子不行”的情况,并且通常要花费大量时间定位与解决
Yarn 通过 lockfiles 文件以及一个确定性的、可靠的安装算法,解决了版本问题和 npm 的不确定性问题
有多种方式,下面介绍两种
1、第一种方式使用Homebrew安装
前提是要安装Homebrew
brew update
brew install yarn
yarn global bin
“到.profile或 .bashrc 或 .zshrc 文件中,以我的机子为例,打开.zshrc文件添加以下命令export PATH="$PATH:$HOME/.yarn/bin"
在命令行输入以下命令,能看到版本信息则证明成功
yarn --version
2、第二种方式使用npm安装
npm install yarn -g
下载地址https://yarnpkg.com/latest.msi
这部分就不说了,非常简单,也是使用命令行安装,具体可以看官方安装方式https://yarnpkg.com/en/docs/install#linux-tab
yarn的使用方式和npm大厅相近,就是把npm的使用地方换成yarn并且添加三方模板组件使用是的yarn add xxx
我们来举例说明yarn是如何使用的,建立一个简单的demo,以React HelloWorld 项目为例来说明(使用yarn+webpack+babel),在mac环境下,win下面基本上类似
1、新建yarndemo目录并进入此目录
mkdir yarndemo
cd yarndemo
2、使用yarn init来初始化项目
yarn init
我们可以看到和使用npm init结果是一样,会创建一个package.json文件
3、添加依赖(以react为例子)
yarn add react react-dom
我们可以看到除了和npm install xxx –save 一样新建一个node_modules文件夹以外,还创建了一个yarn.lock文件。
yarn.lock 锁定了安装包的精确版本以及所有依赖项。有了这个文件,你可以确定项目团队的每个成员都安装了精确的软件包版本,部署可以轻松地重现,且没有意外的 bug,并且这个文件可以使得程序在不同的机器上可以攻取一致的体验
Yarn 锁定文件的和安装算法的存在,确保了将应用程序部署到生产环境时,安装的依赖在开发机器之间,产生的文件和文件夹结构完全相同。
3、安装webpack和webpack-dev-server
yarn add webpack webpack-dev-server
4、安装babel
yarn add babel-core babel-preset-es2015 babel-preset-react babel-loader
5、在根目录中新建.babelrc并输入以下内容(不理解的可以看webpack这一节:http://www.jianshu.com/p/732c4d501668)
{
"presets":["react","es2015"]
}
6、在yarndemo目录中分别新建app和public目录
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>yarn demotitle>
head>
<body>
<div id="container">div>
<script src='./bundle.js'>script>
body>
html>
import React from 'react' ;
import ReactDOM from 'react-dom' ;
ReactDOM.render(
Hello World
,
document.getElementById('container')
);
module.exports = {
entry: __dirname +"/app/main.js",//唯一的入口文件
output:{
path: __dirname +"/public",//打包后文件存放的目录
filename:'bundle.js' //打包后输入的文件名
},
devServer:{
contentBase: "./public",//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
//新增加部分
module:{
loaders:[
//babel配置
{
test:/\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
}
"scripts":{
"start":"webpack-dev-server --progress --port 8888"
}
到此为止,我们就使用yarn+webpack+babel完成了一个简单的hello world demo,也体验了一下yarn的使用方式,和npm使用方式差不多,只不过命令不太一样而已
NPM | YARN | 说明 |
---|---|---|
npm init | yarn init | 初始化某个项目 |
npm install/link | yarn install/link | 默认的安装依赖操作 |
npm install taco —save | yarn add taco | 安装某个依赖,并且默认保存到package. |
npm uninstall taco —save | yarn remove taco | 移除某个依赖项目 |
npm install taco —save-dev | yarn add taco —dev | 安装某个开发时依赖项目 |
npm update taco —save | yarn upgrade taco | 更新某个依赖项目 |
npm install taco –global | yarn global add taco | 安装某个全局依赖项目 |
npm publish/login/logout | yarn publish/login/logout | 发布/登录/登出,一系列NPM Registry操作 |
npm init | yarn init | 初始化某个项目 |
npm run/test | yarn run/test | 运行某个命令,可以在script脚本中去配置 |
使用以下命令来查看当前的源,默认是:官网
yarn config get registry
# -> https://registry.yarnpkg.com
改成taobao的源
yarn config set registry 'https://registry.npm.taobao.org'
#yarn config v0.17.3
#success Set "registry" to "https://#registry.npm.taobao.org".
#✨ Done in 0.06s.
然后使用yarn install就应该快多了。
1、全局安装,这里有好多种安装方式,我采用npm安装
npm install yran -g
2、配置环境变量
export PATH="$PATH:$HOME/.yarn/bin"
将上述命令添加到你的.profile或.bashrc或是.zshrc或其它的文件中,我这里使用的是.zshrc
3、运行yarn –version检查是否安装成功,报如下错
4、解决办法
在命令行中运行以下命令:
mkdir ~/Library/Caches/Yarn
最后完美解决