React-Native(node_modules)开发指南

问题背景：

为了节省app存储空间，好多github上的项目没有node_modules模块。

1.自己创建的工程

在终端直接使用：react-native init项目名称。

localhost:Desktop niu$ react-native init NiuReact
This will walk you through creating a new React Native project in /Users/niu/Desktop/NiuReact
Installing react-native package from npm...
Setting up new React Native app in /Users/niu/Desktop/NiuReact
NiuReact@0.0.1 /Users/niu/Desktop/NiuReact
└── react@15.3.2 

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN prefer global marked@0.3.6 should be installed with -g
NiuReact@0.0.1 /Users/niu/Desktop/NiuReact
├─┬ babel-jest@16.0.0 
│ ├─┬ babel-plugin-istanbul@2.0.3 
│ │ ├── istanbul-lib-instrument@1.1.4 
│ │ └─┬ test-exclude@2.1.3 
│ │   └── require-main-filename@1.0.1 
│ └─┬ babel-preset-jest@16.0.0 
│   └── babel-plugin-jest-hoist@16.
To run your app on iOS:
   cd /Users/niu/Desktop/NiuReact
   react-native run-ios
   - or -
   Open /Users/niu/Desktop/NiuReact/ios/NiuReact.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd /Users/niu/Desktop/NiuReact
   react-native run-android

2.github上的项目

需要在终端进入github项目目录下运行npm install 或 npm update

localhost:navigation-master 2 niu$ npm install
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated cross-spawn-async@2.2.4: cross-spawn no longer requires a build toolchain, use it instead!
npm WARN prefer global babel@5.8.38 should be installed with -g

> fsevents@1.0.14 install /Users/niu/Desktop/navigation-master 2/node_modules/fsevents
> node-pre-gyp install --fallback-to-build

[fsevents] Success: "/Users/niu/Desktop/navigation-master 2/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" is installed via remote

> bufferutil@1.2.1 install /Users/niu/Desktop/navigation-master 2/node_modules/bufferutil
> node-gyp rebuild
> spawn-sync@1.0.15 postinstall /Users/niu/Desktop/navigation-master 2/node_modules/spawn-sync
> node postinstall

navigation@0.0.1 /Users/niu/Desktop/navigation-master 2
   ├── xdg-basedir@2.0.0 
    ├─┬ yeoman-assert@2.2.1 
    │ └── path-exists@2.1.0 
    └── yeoman-welcome@1.0.1 

等安装完了以后查看项目下面有node_modules文件夹跟package.json同级目录，项目正常可以运行起来。

错误一

如果你的环境是React Native 0.32以下版本 ，Xcode8 会报错

RCTSRWebSocket.m报错

这个报错在此文件中有两处，代码

SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

修改为

(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

RCTScrollView.m 报错

Use of undeclared identifier '_refreshControl'; did you mean 'refreshControl'?

@implementation RCTCustomScrollView
{
  __weak UIView *_dockedHeaderView;
  RCTRefreshControl *_refreshControl;  // 加入此行
}

错误二

如果出现下面错误，

建议将 192.168.25.13 改为localhost，便于开发。

错误三

"std::terminate()", referenced from:
___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
"___cxa_begin_catch", referenced from:
___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
"___gxx_personality_v0", referenced from:
-[RCTJavaScriptContext initWithJSContext:onThread:] in libReact.a(RCTJSCExecutor.o)
-[RCTjavascriptContext init] in libReact.a(RCTJSCExecutor.o)
-[RCTjavascriptContext invalidate] in libReact.a(RCTJSCExecutor.o)
_RCTNSErrorFromJSError in libReact.a(RCTJSCExecutor.o)
+[RCTJSCExecutor runRunLoopThread] in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor init] in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor context] in libReact.a(RCTJSCExecutor.o)
...
ld: symbol(s) not found for architecture x86_64

错误四

com.facebook.react.javascript] Seems you're trying to access 'ReactNative.createClass' from the 'react-native' package. Perhaps you meant to access 'React.createClass' from the 'react' package instead?

For example, instead of:

  import React, { Component, View } from 'react-native';

You should now do:

  import React, { Component } from 'react';
  import { View } from 'react-native';

或 删除node_modules 使用naminstall重新配置。

3. npm install

npminstall安装nodejs的依赖包

例如npm install express 就会默认安装express的最新版本，也可以通过在后面加版本号的方式安装指定版本，如npm install express@3.0.6

npminstall-g 将包安装到全局环境中

但是代码中，直接通过require()的方式是没有办法调用全局安装的包的。全局的安装是供命令行使用的，就好像全局安装了vmarket后，就可以在命令行中直接运行vm命令

npminstall--save 安装的同时，将信息写入package.json中

项目路径中如果有package.json文件时，直接使用npm install方法就可以根据dependencies配置安装所有的依赖包

这样代码提交到github时，就不用提交node_modules这个文件夹了。

npm init会引导你创建一个package.json文件，包括名称、版本、作者这些信息等

npmremove移除

npmupdate更新

npmls列出当前安装的了所有包

npmroot查看当前包的安装路径

npmroot-g 查看全局的包的安装路径

npm help帮助，如果要单独查看install命令的帮助，可以使用的npm help install

4.package.json作用

package.json文件描述了一个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息。格式必须是严格的JSON格式。

通常我们在创建一个NPM程序时，可以使用npm init命令，通过交互式的命令，自动生成一个package.json文件，里面包含了常用的一些字段信息，但远不止这么简单。通过完善package.json文件，我们可以让npm命令更好地为我们服务。

name

name和version是package.json中最重要的两个字段，也是发布到NPM平台上的唯一标识，如果没有正确设置这两个字段，包就不能发布和被下载。

下面是官方给出的一些建议:

• 名字里不要再包含"js"和"node"，因为默认NPM包就是node.js程序，不过你可以通过engines字段来指定。名字将会被作为url的一部分，所有要符合http url的一般命名规则，不能包含url非法字符，也不能以.和_开头。名字也将作为require()命令的参数，所以应该尽量简明。如果包要发布到NPM平台上的话，最好先检查下有没有重名, 并且字母只能全部小写。

  新版本的NPM可以指定scope, 名字可以加前缀标识，如@ijse/mypackage。

  version

  这个字段的取值需要符合node-semver的规则，详细可以见其文档。

  description

  包的描述信息，将会在npm search的返回结果中显示，以帮助用户选择合适的包。

  keywords

  包的关键词信息，是一个字符串数组，同上也将显示在npm search的结果中。

  homepage

  包的主页地址

  bugs

  包的bug跟踪主页地址，应该如下设置：

  bugs: {  
    "url": "https://github.com/ijse/project/issues",
    "email": "my@ijser.cn"
  }

  license

  包的开源协议名称

  author

  包的作者，可以是字符串或对象：

  author: {  
    "name": "ijse",
    "email": "my@ijse.cn",
    "url": "https://www.ijser.cn"
  }

  或者:

  author: "ijse  (https://www.ijser.cn)"  

  contributors, maintainers

  包的贡献者，是一个数组。

  files

  包所包含的所有文件，可以取值为文件夹。

  通常我们还是用.npmignore来去除不想包含到包里的文件。

  main

  包的入口文件，如index.js

  bin

  如果你的包里包含可执行文件，通过设置这个字段可以将它们包含到系统的PATH中，这样直接就可以运行，很方便。如：

  "bin": {
    "iapp": "./cli.js"
  }

  当包被安装后，NPM将创建一个cli.js文件的链接到/usr/local/bin/iapp下。

  man

  为系统的man命令提供帮助文档, 如：

  "man": "./man/doc.1"

  帮助文件的文件名必须以数字结尾，如果是压缩的，需要以.gz结尾。

  如果是字符串数组：

  "name": "foo",
  "man": ["./man/foo.1", "./man/bar.1", "./man/foo.2" ]

  则分别可以man foo,man foo-bar,man2foo来查看。

  directories

  CommonJS包所要求的目录结构信息，目前除了告诉别人你的程序目录结构，貌似没有别的什么用。
  下级字段可以是：lib, bin, man, doc, example。 每个都是字符串

  repository

  包的仓库地址。如：

  "repository": {
    "type": "git",
    "url": "https://github.com/ijse/project.git"
  }

  scripts

  通过设置这个可以使NPM调用一些命令脚本，封装一些功能。

  config

  添加一些设置，可以供scripts读取用，同时这里的值也会被添加到系统的环境变量中。

  "name": "foo",
  "config": {
    "port": "8080"
  }

  npm start的时候会读取到npm_package_config_port环境变量。

  同时也可以使用npm config命令来修改设置：

  npm config set foo:port 8001  

  dependencies

  指定依赖的其它包，这些依赖是指包发布后正常执行时所需要的，如果是开发中依赖的包，可以在devDependencies设置。

  通常使用下面命令来安装：

  npm install --save otherpackage  

  形式可以有如下多种：

  • version严格匹配某个版本>version必须大于某个版本>=version=version1 <=version2range1||range2满足range1 或range2git://...git地址user/repo同上tag指定某个tag的版本path/path本地包所有文件夹

    下面都是可以用的：

    { "dependencies" :
      { "foo" : "1.0.0 - 2.9999.9999"
      , "bar" : ">=1.0.2 <2.1.2"
      , "baz" : ">1.0.2 <=2.3.4"
      , "boo" : "2.0.1"
      , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
      , "asd" : "https://asdf.com/asdf.tar.gz"
      , "til" : "~1.2"
      , "elf" : "~1.2.3"
      , "two" : "2.x"
      , "thr" : "3.3.x"
      , "lat" : "latest"
      , "dyl" : "file:../dyl"
      }
    }

    Git URL可以有如下种形式：

    git://github.com/user/project.git#commit-ish  
    git+ssh://user@hostname:project.git#commit-ish  
    git+ssh://user@hostname/project.git#commit-ish  
    git+https://user@hostname/project/blah.git#commit-ish  
    git+https://user@hostname/project/blah.git#commit-ish  

    devDependencies

    这些依赖只有在开发时候才需要。

    npm install --save-dev mypack  

    peerDependencies

    相关的依赖，如果你的包是插件，而用户在使用你的包时候，通常也会需要这些依赖（插件），那么可以将依赖列到这里。

    举个例子，如karma, 它的package.json中有设置：

    "peerDependencies": {
      "karma-jasmine": "~0.1.0",
      "karma-requirejs": "~0.2.0",
      "karma-coffee-preprocessor": "~0.1.0",
      "karma-html2js-preprocessor": "~0.1.0",
      "karma-chrome-launcher": "~0.1.0",
      "karma-firefox-launcher": "~0.1.0",
      "karma-phantomjs-launcher": "~0.1.0",
      "karma-script-launcher": "~0.1.0"
    }

    这些都是karma的相关插件，一般使用karma的时候都会需要。

    bundledDependencies

    绑定的依赖包，发布的时候这些绑定包也会被一同发布。

    optionalDependencies

    即使这些依赖没有，也可以正常安装使用

    engines

    指定包运行的环境

    "engines": {
      "node": ">=0.10.3 < 0.12",
      "npm": "~1.0.20"
    }

    engineStrict

    设置为true强制限定engine

    os

    指定你的包可以在哪些系统平台下运行。

    "os": [ "darwin", "linux", "!win32" ]

    即可以在darwin和linux平台下运行，而不能在win32下。这里设定的取值是来自process.platform的。

    cpu

    可以指定包运行的cpu架构，如

    "cpu": [ "x64", "!arm" ]

    取值来自process.arch。

    preferGlobal

    如果你的包是命令行运行的，那可以将其设置为true建议用户全局(npm install-g)安装。但它并不强制用户。

    private

    设为true这个包将不会发布到NPM平台下。

    publishConfig

    这个字段用于设置发布时候的一些设定。尤其方便你希望发布前设定指定的tag或registry。

    也可以设定其它子字段，但只有tag和registry会影响到发布。

    NPM的一些默认值说明

    "scripts":{"start":"node server.js"}如果在项目根目录下含有server.js文件，则NPM会自动设置此值。

    "scripts":{"preinstall":"node-gyp rebuild"}

    如果在项目根目录下含有binding.gyp文件，则NPM会自动设置此值。

  • "contributors":[...]

    如果项目根目录下含有AUTHORS文件，则NPM会自动将每一行以Name(url)的格式读取并设定此字段。