react-native环境搭建

关于环境，你需要了解的知识：

1、node.js / npm / webpack??

react-native算是web应用，几乎所有代码都是JavaScript来写的（哈哈哈哈哈此时我要说一句：JavaScript是世界上最好用的编程语言，PHP的同学肯定不符）

下面你需要了解node.js和npm，神器登场，让npm助react-native一臂之力。

Node.js?是一个基于 Chrome V8 引擎的 JavaScript 运行环境，使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。?

?

npm是什么？?=> JavaScript 仓库

npm is written in Node.js,so you need to install Node.js in order to use npm. You can install npm via the Node.js website,or by installing a?Node Version Manager(NVM). This chapter explains both options.

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个?包（package）?（即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

?

npm部分组成：

网站?是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。

注册表?是一个巨大的数据库，保存了每个包（package）的信息。

CLI?通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

?

npm install <package_name>

?

管理本地npm包的最好方式是新建一个package.json文件

To get a default?package.json

npm init -y

?

To add an entry to your?package.json‘s?dependencies:

npm install <package_name> --save

To add an entry to your?package.json‘s?devDependencies:

npm install <package_name> --save-dev

全局安装

npm install/uninstall -g <package>

npm install -g [email?protected]

npm install webpack-cli -D

?

在?package.json?文件所在的目录中执行?npm update?命令

?

如需删除 node_modules 目录下面的包（package），请执行：

npm uninstall webpack

如需从?package.json?文件中删除依赖，需要在命令后添加参数?--save:

npm uninstall --save webpack

?

?

Webpack?是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

?

?

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件Webpack?Loader

Webpack Loader?可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。

Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的?webpack.config.js?文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过?--config?选项来指定配置文件。

在根目录创建?package.json?来添加 webpack 需要的依赖：

{
??"name":?"webpack-example",
??"version":?"1.0.0",
??"description":?"A simple webpack example.",
??"main":?"bundle.js",
??"scripts": {
????"test":?"echo "Error: no test specified" && exit 1"
? },
??"keywords": [
????"webpack"
? ],
??"author":?"zhaoda",
??"license":?"MIT",
??"devDependencies": {
????"css-loader":?"^0.21.0",?//兼容版本?
????"style-loader":?"^0.13.0",?//大致相当的版本
????"webpack":?"^1.12.2"
? }
}

?npm install

创建?webpack.config.js：

var?webpack =?require(‘webpack‘)

module.exports = {
? entry:?‘./entry.js‘,
? output: {
??? path: __dirname,
??? filename:?‘bundle.js‘
? },
??module: {
??? loaders: [
????? {test:?/.css$/,loader:?‘style-loader!css-loader‘}
??? ]
? }
}

同时简化?entry.js?中的?style.css?加载方式：

require(‘./style.css‘)

最后运行?webpack，可以看到 webpack 通过配置文件执行的结果和上一章节通过命令行?webpack entry.js bundle.js --module-bind ‘css=style-loader!css-loader‘?执行的结果是一样的。

?

另外Redux也了解一下，日后说不定你会用到

http://cn.redux.js.org/

?

?

?2、开发环境配置

?官方配置 Mac & Windows

?https://reactnative.cn/docs/getting-started/