關於react-native環境你須要瞭解的node/npm/webpack

關於環境，你須要瞭解的知識：

一、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 webpack@3.10

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/

 

 

 二、開發環境配置

 官方配置 Mac & Windows

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