2018-11-10

在MacOS 10.14.1下搭建react-native开发环境

目标环境：

写此文是因为连搭环境都会有不少坑出来。
本文使用脚手架是 react-native-cli
而react-native 的官方文档在2018年11月10日12:41:13时已经是 expo, 其安装方式如下：

1	npm install -g expo-cli

这个工具我还不太熟悉，其文档地址在此 https://facebook.github.io/react-native/docs/getting-started , 稍后再切换到 expo, 下面主要是对 react-native 的介绍。

macOS 10.14.1
react-native 0.57.4
react-native-cli 2.0.1

安装步骤：

1 安装 HomeBrew

官网： https://brew.sh/

在终端粘贴下面的命令安装 homebrew

1	/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

当然 HomeBrew 得到默认仓库也在国外，嫌网速慢，等待蛋疼可以参考下面操作，更改HomeBrew 仓库为清华镜像

Homebrew-bottles 镜像使用帮助
https://mirrors.tuna.tsinghua.edu.cn/help/homebrew-bottles/
替换现有上游
https://mirrors.tuna.tsinghua.edu.cn/help/homebrew/

下面使用 brew 安装软件不需要 sudo 前缀，只有在使用 npm 全局安装模块的时候才需要管理员权限。

2 安装 nodejs

虽然使用 brew 也可以安装 nodejs，但是brew 我不熟悉，我选择去nodejs 官网https://nodejs.org/en/下载 nodejs 的pkg安装包,我一般选择LTS版本。写此文时nodejs的LTS版本为 10.13.0 LTS

也给出brew 安装 nodejs的命令。

1	brew install node

安装完 nodejs 的第二件事就是切换 npm 仓库为淘宝，你可以百度 npm taobao 找到方法，或者使用一个简单的方法，使用 nrm，nrm 的更详细信息自己百度。只简单介绍一下方法.

安装 nrm

1
2
3

sudo npm i -g nrm
nrm ls   # 查看所有可以使用的仓库
nrm use taobao.    # 使用taobao 镜像仓库

安装其他必用的模块

1	sudo npm i -g yarn vue-cli webpack webpack-cli hexo-cli # yarn 可以缓存模块要比 npm 速度快很多，剩下的是我必用的

2 安装 watchman，flow

1 2	brew install watchman brew install flow

3 安装 react-native-cli

1	sudo npm i -g react-native-cli

安装 Xcode 以及 Xcode command line tools

在 Mac App store 里面搜索 Xcode 下载并且安装。
在终端运行下面命令安装 command linetools
1
xcode-select --install

安装 Android Studio

到 Android 开发者网站下载 Android studio。默认是访问不到的，但是Google的中文域名可以访问地址： https://developer.android.google.cn/studio/

下载完后需要安装 sdk ，并且新建一个模拟器
默认情况下会遇到一个 sdk 路径找不到的问题：

解决方法参考了这里：
https://www.jianshu.com/p/c04ac43f5021
解决方法：在工程的根目录下的android文件下新建一个local.properties的文件，在文件中写入

sdk.dir = /Users/jinwenfeng/Documents/android/android-sdk-macosx

这里就是androidsdk的路径，至此问题一成功解决

打开Android studio，点击“File”菜单下的“Other Settings”，接着点击“Default Project Structure”选项。
这时就会看到SDK Location，点击图示第二个红色区域的图标，就可以修改默认的AndroidSDK路径。
https://jingyan.baidu.com/article/c1465413e068770bfcfc4cfb.html

新建一个 react-native 项目

1 2	react-native init FirstApp cd FirstApp

运行 ios App

1	react-native run-ios

此时不出意外会出错：

Print: Entry, “:CFBundleIdentifier”, Does Not Exist
from ： http://bbs.reactnative.cn/topic/4301/ios-rn-0-45%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E6%89%80%E9%9C%80%E7%9A%84%E7%AC%AC%E4%B8%89%E6%96%B9%E7%BC%96%E8%AF%91%E5%BA%93-boost%E7%AD%89/2
原因是因为在家目录 ~/.rncache 里面文件没有下载完整
这些文件的说明在这里，GitHub仓库 react-native的script文件夹下有关于iOS 第三方依赖的说明，以及文件下载地址：
https://github.com/facebook/react-native/blob/0.57-stable/scripts/ios-install-third-party.sh
下载里面的依赖文件放到 ~/.rncache里面，同时删除 iOS文件里面的build文件和项目文件夹下的node_modules文件，运行 yarn install 重新安装 node依赖
另外上面提到的iOS依赖里面有一个 boost_1_63_0.tar.gz 的下载是下载网址http://www.boost.org/users/history/version_1_63_0.html 如果上面的下载地址有问题的话

运行 Android App

运行 Android App 需要先开启模拟器，

cd /Users/x/Library/Android/sdk/emulator    #可以把这个目录添加到path里面
vi ~/.bashrc.    # 修改 ~/.bash_profile  或者 ~/.zshrc
.# Android 模拟器 在上面的 如果你用bash 就修改 .bash_profile 如果你用 oh-my-zsh就修改zshrc
export PATH=/Users/x/Library/Android/sdk/emulator:$PATH
source  ~/.bashrc   # or
.  ~/zshrc  # 使修改生效 这样就可以直接使用 emulator命令了
emulator -list-avds   # 列出所有的虚拟设备
emulator -avd Nexus_5X_API_28   # 我的名字就起的有点长了略微蛋疼

1	react-native run-android

会出现的问题在上面安装 Android Studio时已经提到，也给出了解决方法，主要是要先创建一个虚拟机或者模拟器，打开模拟器后退出Android studio，
然后运行命令行即可。

安装 NDK

react-native ： https://github.com/facebook/react-native 代码库里面 examples 需要使用 ndk ，而且不是最新版本需要下载 10e 这个旧版本。
Android的SDK 会在安装 Android Studio 时安装，但是 NDK 不会。需要单独安装，

2018-09-02

使用webpack搭建es6环境 --20180902

关于 es6 环境的搭建

date： 2018年08月29日09:18:12. author: 付腾飞

我的系统是 Mac 下面的一些操作，如果在win下需要自己自行做对应的操作，我在命令行里面的文件夹或者文件操作，你可以使用鼠标来完成，或者在win下的git-bash下和我一样敲命令。

前提

要安装nodejs
Mac或者win系统去官网找安装包，安装即可，Linux的安装方法以后补充

安装 nre

npm i -g nre  # 用来切换  npm 仓库地址
nre ls
nre use
nre help

nre use taobao  # 切换 npm  仓库为 淘宝
npm i -g yarn   # yarn 作用和 npm 仓库差不多， 个人觉得 yarn 安装东西比 npm 略微快

初始化一个文件夹

mkdir demodir
cd demodir
npm init  # 一步一步一步的的来
npm init -y   # 一步到位  该命令执行完毕会在根目录生成一个 package.json 文件