美文网首页
macOS下配置React Native开发环境的正确姿势

macOS下配置React Native开发环境的正确姿势

作者: NSFish | 来源:发表于2017-09-14 15:49 被阅读17次

    TL.DR

    Homebrew -> watchman
    nvm -> Node.js -> npm -> react-native-cli -> react-native

    Heads up

    JS的世界是疯狂的。

    2015年facebook在React.js Con上首次推出React Native时,Node.js的版本号是0.11.x,两年半后的今天已经狂飙突进到了8.5.0。
    在这种时候,不论是前端老司机,还是刚刚接触JS的跨界开发者,都需要一根安全带——

    nvm

    Node Version Manager,支持安装多个Node版本并可自由切换,居家旅行必备。
    安装过程有点曲折。尽管Homebrew中可以搜到nvm的formula,但官方并不支持通过它安装,look

    Homebrew installation is not supported. If you have issues with homebrew-installed nvm, please brew uninstall it, and install it using the instructions below, before filing an issue.

    最简单的安装方式是

    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash
    #or
    wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash
    

    注意链接中包含了nvm的版本号,当你读到这里时很可能nvm已经有了更新的版本,你可以从官方repo的README中获取最新的链接。

    如果你用zsh的话,那么zsh-nvm会是更好的选择。

    Node.js && npm

    通过nvm安装最新的Node.js LTS版本

    nvm install --lts
    
    #安装成功后查看node版本
    node -v
    v6.11.3
    

    设置npm指向淘宝镜像,原因你懂的

    echo 'registry https://registry.npm.taobao.org' > ~/.npmrc
    

    Node自带的npm往往不是最新的,更新先

    npm install -g npm@latest
    

    react-native-cli

    react-native-cli是一个npm package

    npm install -g react-native-cli
    

    它的核心作用是生成React Native工程。

    react-native init hello_react_native
    

    以及启动app

    cd hello_react_native
    
    #这个command只做2件事,在app这一边
    #1. 调用xcodebuild编译iOS工程,把生成的.app安装到Simulator里
    #2. 启动Simulator
    #3. 启动app
    #在Node.js这边
    #1. 启动React Native Packager
    react-native run-ios
    

    watchman

    上文提到的React Native Packager,会利用watchman监听工程目录下js文件的变化,并通知运行中的app,以实现Hot Reload。

    brew install watchman
    

    如果安装后Homebrew提示postinstall failed,很可能是因为/usr/local目录的权限不对,需要

    sudo chown -R whoami /usr/local
    

    运行

    react-native run-ios
    

    一切顺利的话,Simulator里应该已经跑起了模板app


    Optional:Visual Studio Code

    facebook推荐使用nuclide,但在开发工具上,我选择做一只软🐶。React Native Tools 是微软专门为React Native提供的VSC扩展,稳定可靠。

    相关文章

      网友评论

          本文标题:macOS下配置React Native开发环境的正确姿势

          本文链接:https://www.haomeiwen.com/subject/qozrsxtx.html